comparisons compression option in uglifyjs webpack prod config breaks on react-mapbox-gl

Can you reproduce the problem with latest npm?

Yes (including npm 5).

Description

There seems to be an incompatibility between CRA 1.0+ and the react-mapbox-gl component. This bug was not present before CRA 1.0, and only shows up in production mode, which makes me think it’s a webpack 2.0 related issue.

Expected behavior

See https://github.com/davidascher/mapbox-repro-bug for a minimal test case (single component render – works in development mode, doesn’t work in production mode)

Actual behavior

In production mode (yarn build + serve -s build) , the map doesn’t show and there’s an incomprehensible traceback (as it’s minified).

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@1.0.6
2. node -v: v7.9.0
3. npm -v: 5.0.0 (but it happened with 4.x as well)

Then, specify:

1. Operating system: OSX
2. Browser and version: Chrome 58.0.3029.110

Reproducible Demo

Source: https://github.com/davidascher/mapbox-repro-bug

(trivial CRA repo with one dependency).

Live site showing bug: https://build-wnyrhmqiph.now.sh/

/cc @alex3165 as he is the maintainer of react-mapbox-gl AFAICT.

[jfirebaugh]

It’s a confluence of factors:

• A module used by mapbox-gl-js has code that checks for the presence of global using typeof global !== "undefined". At the point where global is used, there’s no outer context in which a variable global is defined.
• webworkify stringifies functions to send to the worker. This is risky, but is the only known solution for bundling worker code that:
  • Doesn’t require loading a second source file from the server
  • Doesn’t duplicate code that’s used in both worker and main thread
• Something in create-react-app setup wraps mapbox-gl-js in function (global) { ... }.
• Uglify decides to mangle the resulting global and transform the resulting typeof g !== "undefined" to void 0 !== g. Together, this produces broken code when the stringified function is executed outside of the function (g) { ... } wrapper.

Because of this confluence, it’s likely to be one of those situations where the maintainers of each of the individual components involved insist that what their code does is perfectly valid, and it’s the other stuff that’s making invalid assumptions and must be fixed. At the risk of doing so myself, I would say the bug is in webpack: it provides no mechanism for a package to indicate what its build/packaging/bundling requirements are. If we, the authors of mapbox-gl-js, could put something in package.json indicating “don’t mess with this code, it’s already been bundled and minified in the way that it needs to be; redundant wrapping, bundling, and mangling is likely to break it”, then issues like this wouldn’t keep cropping up.

[kzc]

mapbox-gl fixed their webpack typeof global issue in https://github.com/mapbox/mapbox-gl-js/pull/6956.

The workaround in https://github.com/facebook/create-react-app/pull/2379/files is no longer needed and can be reverted.