Repository navigation
Default source maps generated for DEV builds seem invalid? #11204
Description
Source maps generated for a create-react-app project in DEV mode seem slightly broken. Specifically, translating from a position in the (compiled) source to the original source returns a valid line number but it always returns an invalid column number of 0. (Production source maps are fine.)
Source map translation is being done with the source-map package.
This breaks an upcoming React DevTools feature ("named hooks") so I've filed an issue in the React repo with more details:
react/react#21868
create-react-app version: 4.0.3
Repro project: https://github.com/bvaughn/test-named-hooks
Activity
bvaughn commentedon Jul 13, 2021
One interesting thing to note is that error overlays correctly report both line and column number:
But programmatically parsing the error stack, loading source maps, and translating the position (like DevTools is doing) seems to fail: react/react#21868 (comment)
I'm not sure what the difference is (yet) 😄
bvaughn commentedon Jul 13, 2021
I think this might be due to DEV bundles using "cheap-module-source-map" module:
https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-scripts/config/webpack.config.js#L177-L181
According to the webpack documentation:
I guess this is what makes them fast, but I'm not sure why the error overlays have the right column numbers.
bvaughn commentedon Jul 13, 2021
After looking into this a little more, I think this source-map type probably remains the correct choice for create-react-app. I will attempt to work around this on the DevTools side.