Changing target to ES6 causes build script to fail

[magicmaaaaan]

Can you reproduce the problem with latest npm?

Yes

Description

After changing the tsc target to es6, react-scripts-ts build fails during minification (I think). Running the development server (react-scripts-ts start) works fine on the es6 target.

Expected behavior

The build script should not fail.

Actual behavior

$ npm run build

> [email protected] build /private/tmp/fooapp
> react-scripts-ts build

Creating an optimized production build...
ts-loader: Using [email protected] and /private/tmp/fooapp/tsconfig.json
Failed to compile.

static/js/main.33e14f74.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./~/tslint-loader!./src/App.tsx:6,0]

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): [email protected]
2. node -v: v7.4.0
3. npm -v: 4.1.2

Then, specify:

1. Operating system: macOS 10.12.3
2. Browser and version: N/A

Reproducible Demo

$ cd /tmp
$ create-react-app fooapp --scripts-version=react-scripts-ts
$ cd fooapp
$ sed -i '' 's/es5/es6/' tsconfig.json
$ npm run build

[heyimalex]

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.

[wmonk]

Thanks @heyimalex! Should this just be closed then?

[heyimalex]

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.

[magicmaaaaan]

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.)

[wmonk]

@magicmaaaaan @heyimalex going to close this issue until upstream is updated! Thanks

[giladaya]

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?

[heyimalex]

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!

[OR13]

$ 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....

[tatemz]

I am also experiencing some issues with various module dependencies and targeting es6. Is there any workaround for these UglifyJS issues?

[heyimalex]

@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.

[sorenhoyer]

I did what @heyimalex suggested.

1. eject
2. npm i -D uglifyjs-webpack-plugin (https://www.npmjs.com/package/uglifyjs-webpack-plugin)
3. add the following to webpack.config.prod.js:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

change to -> new UglifyJsPlugin

4. 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 :)