42

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

Red Baron
  • 7,181
  • 10
  • 39
  • 86
  • 1
    create-react-app comes with webpack pre-installed I believe. Either way, it definitely generates source maps in the build folder. – Robin Zigmond Apr 29 '19 at 13:22
  • @RobinZigmond thanks. I am wary of uploading these to production, so do I need to regenerate them everytime I make a change? – Red Baron Apr 29 '19 at 13:26
  • 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. – Robin Zigmond Apr 29 '19 at 13:29
  • @RedBaron - I am also having the same issue, did you find the solution? – bijayshrestha Nov 12 '19 at 09:03
  • 4
    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? – Sigfried Sep 05 '22 at 15:29

3 Answers3

55

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

3b3ziz
  • 851
  • 8
  • 7
  • 2
    2.* in (2) on windows i would add && like so: "scripts": { "build": "set GENERATE_SOURCEMAP=false && react-scripts build" } – adir abargil Aug 24 '20 at 09:27
  • Why do they do this? Isn't sourcemap a form of "leaking"? [This line](https://github.com/facebook/create-react-app/blob/fd8c5f7b1b1d19d10d24cc2f9fdfc110585dc030/packages/react-scripts/config/webpack.config.js#L42) only evals to `false` (disable sourcemap) if the corresponding env var is set explicitly. – Minh Nghĩa Mar 09 '22 at 08:11
  • @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: https://stackoverflow.com/questions/27345520/source-maps-files-in-production-is-it-safe – Jakob Jan Kamminga Jan 04 '23 at 13:15
  • 3
    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. – Matheus Camara Feb 02 '23 at 17:21
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)

    .env file position

  2. Write GENERATE_SOURCEMAP=false in this file.

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

Pablo LION
  • 1,294
  • 6
  • 20
0

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

"scripts": { 
    "build": "set  \"GENERATE_SOURCEMAP=true\" && react-scripts build" 
  }
Yogita Sinkar
  • 1
  • 1