Repository navigation
CRA generating invalid sourcemaps? #4683
Description
tl;dr
- According to
sourcemap-validatorand 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
UglifyJsPluginfixes 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.gitcd cra-sourcemap-testingyarnyarn buildnode test-sourcemaps.js-> throws error
Otherwise, setting up from scratch:
npx create-react-app my-sourcemap-testingcd my-sourcemap-testingyarn build- then, test the
build/static/js/main.*.jsandbuild/static/js/main.*.js.mapfiles withsourcemap-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.gitcd cra-sourcemap-testingyarnyarn buildnode 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
UglifyJsPluginfromconfig/webpack.config.prod.js(after ejecting) solves the problem and generates valid sourcemaps, but doesn't minify/uglify the bundled js.
Activity
Timer commentedon Jun 26, 2018
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-minifyand trade speed for correctness?bugzpodder commentedon Jun 26, 2018
I think uglifyjs-webpack-plugin is going to make a switch to terser at some point: webpack-contrib/uglifyjs-webpack-plugin#298 (comment)
Timer commentedon Jun 26, 2018
Let's make sure that happens before we cut 2.0 final.
kenhoff commentedon Jun 26, 2018
If it's useful:
babel-minify-swapon the example repo (https://github.com/kenhoff/cra-sourcemap-testing/tree/babel-minify-swap),UglifyJsPluginforbabel-minify-webpack-plugin.yarn build:Also, I attempted the fix for
uglify-esby swapping it withterserdescribed 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-appin general!)kzc commentedon Jul 7, 2018
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 commentedon Sep 18, 2018
We've switched to Terser instead of Uglify. Please re-test this after v2 is released stable.
Thanks!