CRA generating invalid sourcemaps?

[kenhoff]

tl;dr

• According to sourcemap-validator and https://sourcemaps.io/, the sourcemaps generated by CRA are invalid. (This might be a problem with those tools, but I'm not sure). Full error below.
• I've set up a repro repo with steps here: https://github.com/kenhoff/cra-sourcemap-testing
• After ejecting, removing UglifyJsPlugin fixes the problem and generates valid sourcemaps, but doesn't minify the outputted js bundle.

Is this a bug report?

Yes. Maybe? I think so.

Did you try recovering your dependencies?

Yup - deleted node_modules and yarn.lock, reinstalled with yarn.

yarn --version is 1.7.0.

Which terms did you search for in User Guide?

sourcemaps, source maps, and eject.

(I'm familiar with ejecting (yarn eject) and manually setting devtool in config/webpack.config.prod.js.)

Environment

Environment:
  OS:  macOS High Sierra 10.13.4
  Node:  9.4.0
  Yarn:  1.7.0
  npm:  5.6.0
  Watchman:  4.9.0
  Xcode:  Not Found
  Android Studio:  Not Found

Packages: (wanted => installed)
  react: ^16.4.1 => 16.4.1
  react-dom: ^16.4.1 => 16.4.1
  react-scripts: 1.1.4 => 1.1.4

Steps to Reproduce

I've set up an example repo at https://github.com/kenhoff/cra-sourcemap-testing.

If you're using that repo:

1. git clone git@github.com:kenhoff/cra-sourcemap-testing.git
2. cd cra-sourcemap-testing
3. yarn
4. yarn build
5. node test-sourcemaps.js -> throws error

Otherwise, setting up from scratch:

1. npx create-react-app my-sourcemap-testing
2. cd my-sourcemap-testing
3. yarn build
4. then, test the build/static/js/main.*.js and build/static/js/main.*.js.map files with sourcemap-validator (https://www.npmjs.com/package/sourcemap-validator)

Expected Behavior

I expected sourcemap-validator to not throw an error, (hypothetically) indicating that the generated sourcemaps are valid.

Actual Behavior

sourcemap-validator and the node test-sourcemaps.js command logs and throws the following error:

[ 'main.a0b7d8d3.js', 'main.a0b7d8d3.js.map' ]
/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/sourcemap-validator/index.js:146
          throw new Error(errMsg);
          ^

Error: Warning: mismatched names
Expected: __webpack_require__ || '__webpack_require__' || '__webpack_require__' || "__webpack_require__" || "__webpack_require__"
Got:    function __webpac ||    function __webpack_ ||          function __webpack_ ||          function __webpack_||      function __webpack_
Original Line:          function __webpack_require__(moduleId) {
Mapping: 1:21→5:0 "__webpack_require__" in ../webpack/bootstrap e71d967440f2e775571f
    at /Users/kenhoff/dev/cra-sourcemap-testing/node_modules/sourcemap-validator/index.js:146:17
    at Array.forEach (<anonymous>)
    at SourceMapConsumer_eachMapping [as eachMapping] (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/sourcemap-validator/node_modules/source-map/lib/source-map/source-map-consumer.js:570:10)
    at validate (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/sourcemap-validator/index.js:83:12)
    at fs.readdir (/Users/kenhoff/dev/cra-sourcemap-testing/test-sourcemaps.js:11:9)
    at FSReqWrap.oncomplete (fs.js:149:20)

Reproducible Demo

I've set up an example repo at https://github.com/kenhoff/cra-sourcemap-testing.

If you're using that repo:

1. git clone git@github.com:kenhoff/cra-sourcemap-testing.git
2. cd cra-sourcemap-testing
3. yarn
4. yarn build
5. node test-sourcemaps.js -> throws error

Other notes

• The sourcemaps appear to be valid to my browser (Chrome Version 67.0.3396.87 (Official Build) (64-bit))
• But, the sourcemaps don't appear to be valid to my Sentry configuration, using the tool here: https://sourcemaps.io/
• Removing the UglifyJsPlugin from config/webpack.config.prod.js (after ejecting) solves the problem and generates valid sourcemaps, but doesn't minify/uglify the bundled js.

[Timer]

Oh uglify ... we seriously need to consider whether or not it's stable to use, there's been a ton of problems with the newer version(s).

Thanks for this report!

While this seemingly only affects source maps, it still worries me.

Should we switch to babel-minify and trade speed for correctness?

[bugzpodder]

I think uglifyjs-webpack-plugin is going to make a switch to terser at some point: webpack-contrib/uglifyjs-webpack-plugin#298 (comment)

[Timer]

Let's make sure that happens before we cut 2.0 final.

[kenhoff]

If it's useful:

• I branched into babel-minify-swap on the example repo (https://github.com/kenhoff/cra-sourcemap-testing/tree/babel-minify-swap),
• ejected
• swapped the UglifyJsPlugin for babel-minify-webpack-plugin.
• but, looks like I'm getting a different error this time, when trying to run yarn build:

Creating an optimized production build...
/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276
        throw new Error(
        ^

Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    at /Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:72:17
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:157:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:48:24)
    at SourceMapSource.node (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/lib/SourceMapSource.js:32:35)
    at SourceMapSource.proto.sourceAndMap (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:18)
    at getTaskForFile (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (<anonymous>)
    at /Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/kenhoff/dev/cra-sourcemap-testing/node_modules/webpack/lib/Compilation.js:670:11)
error Command failed with exit code 1.

Also, I attempted the fix for uglify-es by swapping it with terser described here: https://github.com/fabiosantoscode/terser#replacing-uglify-es-with-terser-in-a-project-using-yarn, but just ended up getting the same error as before, even after recovering installed packages.

Any thoughts? Anything else that you'd recommend I try to keep debugging?

Thanks so much for all your help! (and for create-react-app in general!)

[kzc]

That source map evaluator tool's analysis should be taken with a grain of salt. It's only producing correct results with webpack without minification because the source lines are not being transformed. Despite what their documentation states, webpack only offers line-based source maps as opposed to Rollup which has high resolution character-based source maps.

webpack-contrib/uglifyjs-webpack-plugin#134 (comment)

By definition there are tradeoffs between small minification size and a good debugging experience. Much of the original code no longer exists when minification transformations are performed.

https://github.com/fabiosantoscode/terser#source-maps-and-debugging

[Timer]

We've switched to Terser instead of Uglify. Please re-test this after v2 is released stable.

Thanks!