Question: Building react with sourcemaps

[nprasath002]

How do I build react with source maps?

I am in master branch with the latest code. I tried setting rollup config to sourcemap: true and setting "sourceMaps": true in .babalrc. I am getting the following error.

Sourcemap is likely to be incorrect: a plugin was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

I want to generate source maps so that I can set breakpoints in the actual es6 package code and step through it.

[markerikson]

Per discussion in Reactiflux, this shouldn't require any special builds of React. The app build setup is generally responsible for generating sourcemaps of any libraries that are being used at build time. I just tried starting up a CRA app in dev mode, and I can both see the original-ish source of react.development.js in the DevTools and set breakpoints there.

[karmadotcom]

What is the real issue here

[nprasath002]

To add more info to the question when adding a breakpoint here
https://github.com/facebook/react/blob/master/fixtures/packaging/globals/dev.html#L7

I expected to step through the original source here
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js#L665
rather than the development build.

[nprasath002]

What is the real issue here

I was just curious to step through code and see how it works.

[gaearon]

I don't know how to do it but you should be able to step through the code in development mode without sourcemaps.

[justingrant]

you should be able to step through the code in development mode without sourcemaps.

Hi @gaearon - With today's React you can't do what the OP is asking, which is to be able to set breakpoints in and step through the original React source (not the transpiled code) when debugging a React app using a debugger like Chrome DevTools or VS Code. You can step-through/set-breakpoints-in the transpiled source which is less clear than the original source.

How "less clear" it is depends on the amount of transpilation. Many other libraries that make heavy use of ES6+ features (esp. async/await) are almost unreadable when transpiled to ES5. React doesn't seem to use much ES6 so it's transpiled code is more readable, but it's still less developer-friendly than doing what many other libraries do which is:

1. Include their original source in packages that they publish to npm
2. Include sourcemaps pointing to that original source, ideally using separate .map files instead of inline maps because inline sourcemaps can introduce performance and usability issues in some cases when debugging.

If React starts using more ES6+ features, I'd strongly recommend adding sourcemaps and shipping original source to npm.

[tsangint]

https://github.com/rollup/rollup/wiki/Troubleshooting#sourcemap-is-likely-to-be-incorrect
Some plugins does not return sourcemap, and I think it should be fixed by react build script.I‘ll try to fix it later

[orloffv]

@tsangint any updates?

[pws019]

@tsangint 什么时候修复好呢？

[sma2lbao]

mark

[maomy1992]

mark

[jasonwilliams]

https://github.com/rollup/rollup/wiki/Troubleshooting#sourcemap-is-likely-to-be-incorrect
Some plugins does not return sourcemap, and I think it should be fixed by react build script.I‘ll try to fix it later

@tsangint did you ever figure out how to get around this issue?