29

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
  • 5,663
  • 9
  • 26
  • 68
  • 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

2 Answers2

47

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
  • 763
  • 7
  • 7
  • 1
    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
1

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.

Pablion
  • 318
  • 2
  • 11