Default source maps generated for DEV builds seem invalid?

[bvaughn]

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]

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

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

[bvaughn]

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

create-react-app/packages/react-scripts/config/webpack.config.js

Lines 177 to 181 in bb64e31

	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]

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.