Bug: source maps are missing from react npm packages

[asvishnyakov]

React version: 19.0.0, applicable to lower versions

Steps To Reproduce

Install react npm package

Link to code example:

The current behavior

Source maps is missing

The expected behavior

Source maps should be generated and present

[JorensM]

What are you using as your build tool? If I'm not mistaken then source maps get generated by the build tool that you use, not React itself. Or are you talking about a React dev environment (as in, working on the React library itself)?

[markerikson]

I filed a PR to add sourcemaps to React's build step in mid-2023 ( #26446 ). That was merged, and for a while the nightly builds had sourcemaps. However, that was later removed, and instead the production artifacts are now optimized but not minified ( #28827 ).

So, React 19 ships without sourcemaps, but the non-minified prod artifacts should result in mostly-readable contents for React when your build tool generates sourcemaps for your app build.

[asvishnyakov]

@markerikson It doesn't seem to help, as none of the tools I tested (Vite, Vite+SWC, etc.) produce code that can be debugged either in development mode or production. I plan to investigate this further during my free time over the holidays to gather more details.

[markerikson]

@asvishnyakov does the generated app bundle sourcemap include any file contents for react-dom-client.production.js?

[asvishnyakov]

@JorensM Source maps are generated by build tools for the application itself. For libraries, the build tools should use the existing source maps shipped with the library (since these can only be generated during the library's build process) and merge them.

Usually, this isn't a concern because you don't typically debug the libraries you use. However, if you suspect a bug in a library—especially one that occurs in production—it can be challenging to identify the issue without debugging the source code.

If you look at other libraries, such as Angular, they ship with source maps because their entire vertical stack (including build tools) correctly generates and merges them.

[asvishnyakov]

@markerikson Right now I have two empty projects created from scratch — one using Vite and the other using Vite+SWC. Neither of them contains the string react-dom-client in their source maps.

[markerikson]

@asvishnyakov is that with React 18, or React 19?

react-dom-client.production.js is a new file in React 19, and doesn't exist in React 19.

If I make a new Vite + React project, the template still appears to default to React 18. After adding build: {sourcemap: true} to the Vite config, it does contain sourcemaps for the React 18 prod artifact, but that file itself is still pre-minified:

If I bump all the React deps to 19 and rebuild, the sourcemap does contain react-dom-client.production.js, and those contents are readable:

[JorensM]

@JorensM Source maps are generated by build tools for the application itself. For libraries, the build tools should use the existing source maps shipped with the library (since these can only be generated during the library's build process) and merge them.

Usually, this isn't a concern because you don't typically debug the libraries you use. However, if you suspect a bug in a library—especially one that occurs in production—it can be challenging to identify the issue without debugging the source code.

If you look at other libraries, such as Angular, they ship with source maps because their entire vertical stack (including build tools) correctly generates and merges them.

Thanks for clarifying, that makes sense.

[JorensM]

(This is on React 19 prod build)

The error trace shows obfuscated function names...

...but when you click on a reference, it does indeed show you the non-minified source code, and the source maps appear to load correctly:

I'm not sure if the obfuscated function names in the error trace are expected or not, but yeah. The actual source map does get generated and is loaded correctly (according to the Developer Resources tab)