Create-react-app: Disable webpack production sourcemaps

[nicksarafa]

I'd like to serve static files, without webpack in my production build. However, there seems to be an instance of webpack, with source-maps to my source files being bundled and pushed to production. I've tested with both Heroku, and Google Cloud, with similar results. I've even tried serving the build directory exclusively, as suggested by this repos documentation, but the webpack with source files always persists on deploy to production. Is there a way to disable webpack/source-maps?

[nicksarafa]

I figured it out. Looks like we have to eject to disable the source maps inside of our production webpack config. Steps are outlined below..

1. Eject your create-react-app by running npm run eject
2. Open /config/webpack.config.prod.js
3. Remove or comment out line 53 containing devtool: 'source-map',
4. Build, and deploy your app again

The annotations inside of /config/webpack.config.prod.js admit generating sourcemaps in production "is slow but gives good results". I'm not sure what "good results" mean, nor do I know why we would use a webpack devtool for a production build. If anybody could shed light on why we push webpack source maps to production by default, that would be great.

[Timer]

You simply need to remove the .map files from the build directory. There's no need to eject.

A source map is a great way of debugging once in production, and it would be a crime to not generate them.
You can easily opt out, though!

You can modify your package.json file and append "&& rm build/*/.map" to your build command.

Hope this helps.

[shai32]

@Timer The map file is a huge file, does it affect performance on production?
should I remove the map before deploying it?

[gaearon]

No, it has no effect on production. Sourcemaps are only downloaded if you open the browser DevTools.

[NguyenManh94]

@gaearon Thank you. I tested the production file with lite-server. And when I run on the terminal window does not load the source map file. Until I open the dev-tool and it loads the source map ... 👍 !

[akshaynaik404]

@gaearon Thanks for that explanation. Why isn't this mentioned here in README.md?

[MickaelBergem]

For those like me who arrive from Google, you can now disable sourcemaps at build time by setting the following environment variable:

export GENERATE_SOURCEMAP=false
yarn build

In my deployment script (on a CI server) I just added this export before the build & deploy to S3 process and it works like a charm :)

[hubgit]

I note that webpack's documentation includes source map-related warnings:

• "You should configure your server to disallow access to the Source Map file for normal users!"
• "You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling."

[stanleyyylau]

Sourcemaps are only downloaded if you open the browser

Yup, but on what propose would you consider generating source-map for production? please take a look at Webpack's official docs.

[sky93]

In windows use:

SET GENERATE_SOURCEMAP=false
yarn build

For those like me who arrive from Google, you can now disable sourcemaps at build time by setting the following environment variable:

export GENERATE_SOURCEMAP=false
yarn build