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