UglifyJs Syntax Error fails `npm run build` but not `npm start`

[rahatarmanahmed]

Can you reproduce the problem with latest npm?

Yes.

Description

One of my npm modules causes the production (npm run build) builds to fail with an UglifyJs syntax error. However, I am able to run the app with npm start without any errors or problems.

Expected behavior

Should be able to build production build if development build is working.

Actual behavior

When running npm run build:

Creating an optimized production build...
Failed to compile.

static/js/main.455932b3.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/evolutionary/select1.js:5,0]

Environment

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

1. npm ls react-scripts (if you haven’t ejected): react-scripts@0.7.0
2. node -v: v6.9.0
3. npm -v: v3.10.9

Then, specify:

1. Operating system: Mac OS X Sierra
2. Browser and version: N/A

Reproducible Demo

1. Generate a new project with create-react-app
2. Run npm install evolutionary
3. Put import 'evolutionary' at the top of index.js
4. Run npm start. Confirm that app loads in browser w/ no errors.
5. Run npm run build. Error appears

I've never used webpack, but from my experience with browserify I would assume that ES6 syntax in dependencies would be handled just as fine as my app code.

[gaearon]

I've never used webpack, but from my experience with browserify I would assume that ES6 syntax in dependencies would be handled just as fine as my app code.

ES6 syntax in dependencies is currently not supported because we use Uglify. This will be fixed when we switch to Babili when it's more stable.

Nevertheless it's important to stress that we aren't and won't be transpiling any dependencies. This is intentional. If your dependencies are published in ES6, your app will not work in browsers that don't support ES6.

We don't transpile dependencies because:

• It breaks some dependencies.
• It is extremely slow in larger projects.

This doesn't have to do with webpack per se, you can set up both browserify and webpack to transpile dependencies. But we don't recommend this and won't be doing this.

Closing as non-actionable as long as we use Uglify.

[rahatarmanahmed]

Oops, I was mistaken. You're right, browserify won't transform dependencies. Good to hear we're planning on moving to Babili!

[henri-hulski]

I have a similar issue but not with a dependency but with node itself.
When running npm run build I get the error:

static/js/main.b4f163eb.js from UglifyJs
Unexpected character '`' [/usr/lib/nodejs/events.js:260,0]

The line 260 in nodejs/events.js contains a template string:

                           `${existing.length} ${type} listeners added. ` +

For more information see cerebral/cerebral#389.

[godmar]

We are getting the same error (unexpected character backquote in /usr/lib/nodejs/events.js) using react-scripts 0.7.0.

How do we determine why webpack includes /usr/lib/nodejs/events.js in the build? We're using mainly react, redux, and a few bootstrap-related packages. Nothing fancy.

Is there a "debugging mode" in webpack that would tell us why it's trying to including /usr/lib/nodejs/events.js in the build?

[godmar]

ps: we tracked it down to react-bootstrap-table@2.5.7 The error disappears if we omit the import for this package.

In general, how do we handle this? Is including certain packages incompatible with create-react-app?

[godmar]

I figured it out. react-bootstrap-tables uses a package called 'Filter', which imports node.js's EventEmitter, which comes from events.js... I can reproduce the failure by simply adding:

import EventEmitter from 'events';

to CRA's src/index.js.

Isn't this a big problem? Presumably, there are numerous packages/npm that include node.js code that they expect to run in the browser... and with create-react-app, I can't use any of them?

[henri-hulski]

Here the problem is also EventEmitter.

[gaearon]

Please file a new issue about EventEmitter and provide code reproducing it.
Thanks!

[godmar]

Done - see #1023

[mpyw]

@gaearon I've got stuck in the related problem, please help me

pre compiled version : a more ES5 compliant build · Issue #4 · moducks/moducks

Why UglifyJSPlugin ignores { resolve: { mainFields: ["main"] } } ?

[mpyw]

I also think that create-react-app should require main prior to module by default if it never transpiles dependencies.

[gre]

It would be neat if create-react-app would support ES6 deps. there are a lot of dependencies I'm relying on (especially around cryptocurrencies/ethereum libs, that are primarly written for Node, and Node does support ES6 now!) that currently publish ES6 code (basically just code with let and arrow functions, nothing fancy) and i'm stuck by not being able to build my project.

Only way I have right now is to eject 😭everything was working smoothly except this. context: I don't really want to eject because I'm actually writting a starter kit for writing ethereum apps (create-dapp).

[cory-baker]

is there no solution to this??????

[jedwards1211]

@gaearon I agree with @mpyw's suggestion and made the above PR to fix this issue for packages that publish both ES5 and ES6.