facebook
Bug: source maps are missing from react npm packages
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
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)?
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.
@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.
@asvishnyakov does the generated app bundle sourcemap include any file contents for react-dom-client.production.js?
@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.
@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.
@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 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.
(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)
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Strictly speaking this bug isn't resolved - my sourcemaps PR got merged and then ripped out before React 19 shipped. The alternative approach was shipping unminified prod builds. This at least preserves the function names and most of the source code, but annoyingly those have already been run through the Closure Compiler and the actual output code is still full of compiler garbage variable names and inlined functions. My approach tried to capture sourcemaps before Closure Compiler rewrote things. So, yeah, I still rather wish my sourcemaps PR had been kept :)