How to disable source maps for React JS Application

Question

My react folder structure is as below

I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.

Where can I find the .map files. How can I delete those files?

I cannot find a build folder. I've tried using the below script But It cannot work in removing source maps

 "scripts": {

    "start": "react-scripts start",
   "build": "GENERATE_SOURCEMAP=false && npm run build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

you can not do it because create-react-app config webpack for you, if you want to manually setup your webpack, you have to run `npm run eject` (which is not recommended for beginner) — Kyaw Kyaw Soe, Aug 23 '18 at 11:03
@BharathPabba, for build you can enable it, I've answered it below — Kyaw Kyaw Soe, Aug 23 '18 at 11:09

score 158 · Accepted Answer · edited Nov 18 '19 at 06:49

158

just remove &&

"scripts": {    
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

edited Nov 18 '19 at 06:49

sandrooco

8,016
9
48
86

answered Aug 23 '18 at 11:06

Kyaw Kyaw Soe

3,258
1
14
25

1

but when i try the above code the browser still shows the code. Thanks – Bharath Pabba Aug 23 '18 at 11:10
are you sure that your code is this `"build": "GENERATE_SOURCEMAP=false react-scripts build"` not this `"build": "GENERATE_SOURCEMAP=false && react-scripts build"` – Kyaw Kyaw Soe Aug 23 '18 at 11:14
As you are new to React, i strongly advice you to gor for create-react-app option and follow the react documentation ;) – vitomadio Aug 23 '18 at 11:17
2

yes. I used the same. The browser still shows the same – Bharath Pabba Aug 23 '18 at 11:17
1

you have to generate project with `npm run build` – Kyaw Kyaw Soe Aug 23 '18 at 11:18
1

if you want to run build file first you need to install serve globally ‘npm run serve -g’ and ‘serve build’, after that you can open it in browser with localhost:5000 – Kyaw Kyaw Soe Aug 23 '18 at 11:46
I cannot use serve on ec2 properly. Please reply if you can help me out this Issue https://stackoverflow.com/questions/51996232/pm2-serve-on-ec2-cannot-access-url – Bharath Pabba Aug 24 '18 at 01:18
"build": "GENERATE_SOURCEMAP=false react-scripts build", Worked for me! – seaBass Oct 21 '19 at 21:11
The below answer is recommended – Posandu Oct 15 '21 at 04:18
3

Doesn't work: `'GENERATE_SOURCEMAP' is not recognized as an internal or external command, operable program or batch file.` – Pointer Null Nov 26 '21 at 08:13
1

@PointerNull use [`cross-env`](https://github.com/kentcdodds/cross-env): `"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build"` – Arkellys Aug 27 '22 at 06:38
@Arkellys 'cross-env' is not recognized as an internal or external command, – Burak Aug 24 '23 at 00:00
@B.ÖNER you have to install the module. – Arkellys Aug 24 '23 at 04:20
@Arkellys Thanks. It worked after installing using "npm install --save-dev cross-env" – Burak Aug 24 '23 at 12:22

score 71 · Answer 2 · answered Feb 09 '19 at 19:13

71

You have to create a .env file in your root directory (same folder as package.json) and set GENERATE_SOURCEMAP=false on a single line.

for additional configurations, you may refer to the documentation here: https://facebook.github.io/create-react-app/docs/advanced-configuration

answered Feb 09 '19 at 19:13

jsnewbie

1,721
13
9

Correct solution with react@16.13.1 – Chizl Nov 01 '20 at 19:54

Nehemie KOFFI · Answer 3 · 2020-03-06T23:05:39.147

36

What I have tested and which is working is to add this code in your .env.production file or .env file

GENERATE_SOURCEMAP=false

edited Mar 06 '20 at 23:05

answered Mar 06 '20 at 14:07

Nehemie KOFFI

1,159
12
11

Sky · Answer 4 · 2021-04-16T22:32:28.710

Solution 1

Edit your package.json like below:

Windows:

    "scripts": {
        "start": "react-scripts start",
        "build": "set \"GENERATE_SOURCEMAP=false\" &&  react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },

Linux:

    "scripts": {
        "start": "react-scripts start",
        "build": "GENERATE_SOURCEMAP=false react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },

Solution 2 (Recommended)

This solution is not operating system dependent and works on both Linux and Windows. Just create a file called .env in the root path of your project and add the following line to it:

GENERATE_SOURCEMAP=false

set \"... windows trick works, cheers. – beltrone Sep 28 '22 at 13:10 — beltrone, Sep 28 '22 at 13:10

score 14 · Answer 5 · answered Jun 06 '19 at 10:38

14

For windows cmd and create-react-app + react-scripts,

You should use set and close with \" YOUR_TMP_ENV_VAR \"

See example:

"deploy:prod:hosting": "set \"GENERATE_SOURCEMAP=false\" && npm run build

this answer helped me: How to set environment variable in React JS..?

answered Jun 06 '19 at 10:38

Raz

434
7
6

Works for me. But I don't understand why when I use `&& set PORT=3001` it's also working but without quotes. Do you know why ? Is that because of the `_` (underscore) inside `GENERATE_SOURCEMAP`? – Julha Jun 20 '19 at 09:57
1

This is the CORRECT answer. Tested on Win10. Thanks! – hsluoyz Jan 20 '20 at 01:42

score 8 · Answer 6 · answered Nov 22 '18 at 04:42

8

This works for me. Hope it helps anyone.

// package.json

"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"

This way, it will auto delete map files during build generation.

answered Nov 22 '18 at 04:42

Krupal Patel

512
8
12

6

This shall work, but not reasonable to follow. Better not to create *.map than to create and remove it. – Ponleu May 09 '19 at 04:59
@Ponleu That's right. But I was not aware that how we can prevent that unnecessary map file so this was the solution at the moment. If you find better way then you can suggest edit, that will be highly appreciated. – Krupal Patel May 13 '19 at 06:03
4

But when you load the application in browser, there will be 404 error for .map files – Shivang Gupta Sep 13 '19 at 07:52
@ShivangGupta I tested this in Chrome and Firefox and you'll only get a 404 on the source maps if you open dev tools. – Johnny Oshika Feb 28 '21 at 06:21

score 6 · Answer 7 · answered Sep 09 '21 at 08:41

6

just add GENERATE_SOURCEMAP=false in .env

answered Sep 09 '21 at 08:41

venky royal

1,860
2
11
19

score 4 · Answer 8 · answered May 06 '21 at 13:43

4

Put this one in your package.json

   "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",

It works on Windows and Linux...

answered May 06 '21 at 13:43

Toni

41
1

score 3 · Answer 9 · answered Jan 13 '19 at 20:41

Solution for ejected create-react-app v2.1.3.

Go to /config/webpack.config.js directory and change the following line:

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

To:

const shouldUseSourceMap = false;

And Bob is your uncle.

score 0 · Answer 10 · answered Jul 15 '19 at 05:34

0

After long struggle nothing worked. Finally what worked for me is changing sourcemap: false in webpack.config.prod.js inside nodemodules/react-script/config hopefully it will work for you too.

answered Jul 15 '19 at 05:34

Kunal Burangi

568
6
16

How to disable source maps for React JS Application

10 Answers10

Solution 1

Solution 2 (Recommended)

Linked