Comments (11)
@tatemz Use a different target?
Just as an update:
- Apparently there's a new package
uglify-es
that supports es6. Someone should try moving create-react-app-typescript to it and see if it alleviates the issues? They're api compatible so the change is as easy as remove uglify, install uglify-es, change require('uglify') to require('uglify-es'). - Babili still isn't 1.0, but is active. Tbh don't know much about it.
- According to this closure compiler supports es6 as an input but can only output es5/3 so it's kinda pointless.
from create-react-app-typescript.
Uglify can't parse the generated ES6 code. Create-react-app would have the same issue if you could emit ES6 code. There's some talk about moving to babili for minification to alleviate this.
from create-react-app-typescript.
Thanks @heyimalex! Should this just be closed then?
from create-react-app-typescript.
Hm, it's not really solvable without a ton of work, and I think we should wait for compiling-to-es6 support to land upstream before tackling it.
We could make the error more obvious by reading the tsconfig first and checking for unsupported targets. That opens up a can of worms (what other tsconfig options aren't supported?), but is in line with create-react-app's maintainer-masochism-in-the-name-of-end-user-experience development strategy.
Maybe a better long-term solution is to lock down the typescript version and tsconfig.json completely? Definitely makes tailoring the experience easier, and cra does basically the same thing with eslint and babel transforms. Some options would be very contentious (like strictNullChecks
and noImplicitAny
), but maybe those could still be exposed. Obviously that would increase the maintenance burden a ton but just a thought.
from create-react-app-typescript.
Ah, I wasn't aware uglify doesn't have es6 support. It's not a huge issue for me; I was just testing and noticed it crashed.
... I think we should wait for compiling-to-es6 support to land upstream before tackling it.
That seems reasonable, but it does imply bringing babel back into this project! (Assuming CRA moves to babili.)
from create-react-app-typescript.
@magicmaaaaan @heyimalex going to close this issue until upstream is updated! Thanks
from create-react-app-typescript.
I just bumped into this issue trying to build a project that uses redux-saga, which in turn uses generator functions, which forced me to change the target to ES6 and caused the build to fail.
So assuming
it's not really solvable without a ton of work
as @heyimalex wrote - what are my options here?
Is there some workaround I can use until the tools get updated?
from create-react-app-typescript.
Nothing I can think of without ejecting. The quickest fix is to replace uglify with another minifier (or none at all if you're ok with that). I remember hearing that closure compiler can handle es6 code, but I'm really not familiar with it. What does the angular world use for minification? They deal with a lot of typescript and I imagine have the same problem with uglify. Maybe that replacement could happen within this project. I really wish I had the time to look into this myself. Sorry I can't be more helpful!
Also I'm not by my computer but are you sure that tsc can't compile generators to es5? I know that babel can and thought that typescript could also. Good luck!
from create-react-app-typescript.
$ react-scripts-ts build
...
Failed to compile.
static/js/main.0ec5b35b.js from UglifyJs
Invalid assignment [./~/promisify-es6/index.js:26,0][static/js/main.0ec5b35b.js:3433,41]
I'm targeting es5 in tsconfig....
I really don't want to eject to fix this, is there an issue for the upstream fix we can track here?
I'm intersted in taking a look at this, I've done the uglify to babili switch for other webpack projects, but I don't understand the react-scripts-ts internals....
from create-react-app-typescript.
I am also experiencing some issues with various module dependencies and targeting es6. Is there any workaround for these UglifyJS issues?
from create-react-app-typescript.
I did what @heyimalex suggested.
- eject
- npm i -D uglifyjs-webpack-plugin (https://www.npmjs.com/package/uglifyjs-webpack-plugin)
- add the following to webpack.config.prod.js:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
change to -> new UglifyJsPlugin
- But got an error, so changed the properties of the new UglifyJsPlugin instance to:
new UglifyJsPlugin({
parallel: true,
uglifyOptions: {
ie8: false,
ecma: 6,
warnings: true,
mangle: true, // debug false
output: {
comments: false,
beautify: false, // debug true
}
},
sourceMap: shouldUseSourceMap,
}),
as suggested here: webpack-contrib/uglifyjs-webpack-plugin#140 (comment)
Works fine now, but it required ejecting, which I think should be fixed in the repo here :)
from create-react-app-typescript.
Related Issues (20)
- Browserlist error
- CRA 2.0 HOT 31
- Include nodejs v8 for for Travis CI build
- Remove dependency on babel HOT 2
- Using jest-extended? HOT 1
- Husky hooks not working HOT 1
- Update webpack-dev-server HOT 10
- Add documentation detailing differences between CRA 2.0 and CRA-TS HOT 10
- Source Maps don't work for `js` or `jsx` files in live dev mode.
- Version 4.0.8: Internet Explorer no working anymore HOT 2
- Build process is almost 20 minutes long HOT 1
- postcss support? HOT 1
- Why is Jest's version hard coded to "20.0.4"? HOT 1
- Jest doesn't work when I add lint-staged
- Maintenance
- Tslint rules are barriers to entry HOT 2
- [Help] Compatibility IE + Firefox old versions problems
- Are 4.X.X versions are legit? HOT 1
- Jest doesn't resolve absolute paths from tsconfig HOT 1
- npm start dont work on freeBSD
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app-typescript.