Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default source maps generated for DEV builds seem invalid? #11204

Closed
bvaughn opened this issue Jul 13, 2021 · 3 comments
Closed

Default source maps generated for DEV builds seem invalid? #11204

bvaughn opened this issue Jul 13, 2021 · 3 comments

Comments

@bvaughn
Copy link
Contributor

bvaughn commented Jul 13, 2021

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:
facebook/react#21868


create-react-app version: 4.0.3

Repro project: https://github.com/bvaughn/test-named-hooks


(Potentially related to older issues #6296 or #4683.)

@bvaughn
Copy link
Contributor Author

bvaughn commented Jul 13, 2021

One interesting thing to note is that error overlays correctly report both line and column number:

Screen Shot 2021-07-13 at 5 08 45 PM

But programmatically parsing the error stack, loading source maps, and translating the position (like DevTools is doing) seems to fail: facebook/react#21868 (comment)

I'm not sure what the difference is (yet) 😄

@bvaughn
Copy link
Contributor Author

bvaughn commented Jul 13, 2021

I think this might be due to DEV bundles using "cheap-module-source-map" module:

devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',

According to the webpack documentation:

cheap-module-source-map - A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line.

I guess this is what makes them fast, but I'm not sure why the error overlays have the right column numbers.

@bvaughn
Copy link
Contributor Author

bvaughn commented 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant