CRA generating invalid sourcemaps? #4683

kenhoff · 2018-06-26T15:32:55Z

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:

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

Otherwise, setting up from scratch:

npx create-react-app my-sourcemap-testing
cd my-sourcemap-testing
yarn build
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:

git clone git@github.com:kenhoff/cra-sourcemap-testing.git
cd cra-sourcemap-testing
yarn
yarn build
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.

The text was updated successfully, but these errors were encountered:

Timer · 2018-06-26T16:47:18Z

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 · 2018-06-26T16:56:09Z

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

Timer · 2018-06-26T17:01:04Z

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

kenhoff · 2018-06-26T20:18:44Z

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 · 2018-07-07T15:18:44Z

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 · 2018-09-18T19:14:36Z

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

Thanks!

Timer added this to the 2.0.0 milestone Jun 26, 2018

Timer added issue: bug issue: needs investigation labels Jun 26, 2018

Timer mentioned this issue Sep 18, 2018

Completion roadmap for react-scripts@2.0 #5024

Closed

Timer closed this as completed Sep 18, 2018

lock bot locked and limited conversation to collaborators Jan 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CRA generating invalid sourcemaps? #4683

CRA generating invalid sourcemaps? #4683

kenhoff commented Jun 26, 2018

Timer commented Jun 26, 2018 •

edited

Loading

bugzpodder commented Jun 26, 2018

Timer commented Jun 26, 2018

kenhoff commented Jun 26, 2018

kzc commented Jul 7, 2018

Timer commented Sep 18, 2018

CRA generating invalid sourcemaps? #4683

CRA generating invalid sourcemaps? #4683

Comments

kenhoff commented Jun 26, 2018

tl;dr

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

Other notes

Timer commented Jun 26, 2018 • edited Loading

bugzpodder commented Jun 26, 2018

Timer commented Jun 26, 2018

kenhoff commented Jun 26, 2018

kzc commented Jul 7, 2018

Timer commented Sep 18, 2018

Timer commented Jun 26, 2018 •

edited

Loading