How to generate sourcemaps in create react app?

Question

I'm wondering how to generate source maps in create-react-app? are they done implicitly? and do they live in the build folder

I've read quite a lot about them being generated with webpack but my app is not using it, so I was wondering how I do this without webpack?

I also don't want to eject

Theodosia

create-react-app comes with webpack pre-installed I believe. Either way, it definitely generates source maps in the build folder. – Wellman

@RobinZigmond thanks. I am wary of uploading these to production, so do I need to regenerate them everytime I make a change? – Theodosia

I'm no expert (actually only just built/deployed a CRA app for the first time over the weekend), but you run the build script every time you want a new production version. If you don't want them in production I guess you just delete them before deploying. – Wellman

@RedBaron - I am also having the same issue, did you find the solution? – Accelerant

I'm confused why the comments and answers seem to be answering the opposite of what the question seems to be. Isn't the OP wanting to generate source maps? The answers seem to be about inhibiting source map generation. I know source maps should generate by default, but I keep getting console errors shown in files like react-jsx-runtime.development.js, react-dom.development.js, etc. instead of in my jsx files. How do I fix that? Or find SO questions/answers about that problem? – Brotherly

Answer 1

According to CRA documentation, source maps are generated by default in production mode.

However, you can disable this behavior (generating source maps in production mode) by running GENERATE_SOURCEMAP=false ./node_modules/.bin/react-scripts build or if you want this behavior to be permanent, do one of the following solutions:

1. Set GENERATE_SOURCEMAP=false in your .env file.
2. Modify the scripts in your package.json and replace "build": "react-scripts build" with "build": "GENERATE_SOURCEMAP=false react-scripts build"

https://facebook.github.io/create-react-app/docs/advanced-configuration

Mufti

2.* in (2) on windows i would add && like so: "scripts": { "build": "set GENERATE_SOURCEMAP=false && react-scripts build" } – Anglican

Why do they do this? Isn't sourcemap a form of "leaking"? This line only evals to false (disable sourcemap) if the corresponding env var is set explicitly. – Shaquitashara

@minh Sourcemaps are public by default. But then again, so is your frontend code. See this answer for some more context on the choice for or against sourcemaps: #27346020 – Corrosive

I really does not understand these answers. The question is about how to generate source maps, isn't it? So, why you guys are explaining how to not generate source map? I guess the author @Red Baron does want to know how to disable it but how to generate it. Anyway, the answer it's simple for me. The source maps are generated when a build is created. But one more question, how do I generate Typescript source map if it exists since building generate Javascript instead. – Ranchman

Answer 2

You can truly set GENERATE_SOURCEMAP=false for windows, like @3b3ziz said. However, to run the script across different OS, its better follow the Advanced Configuration Chapter in official document.

Here's what's needed:

1. Create a .env file in the root of the project. (same folder as your package.json)

2. Write GENERATE_SOURCEMAP=false in this file.

3. Rerun whatever you need. react-scripts doesn't detect change in .env.

Tollhouse

Answer 3

If you are using CRA, just add the following to your package.json

"scripts": { 
    "build": "set  \"GENERATE_SOURCEMAP=true\" && react-scripts build" 
  }

Gride

How do you enable it for react-scripts start? – Beaumont