How to disable source maps for React JS Application?

Question

My react folder structure is as below:

I haven't 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 can't remove 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
– Kyaw Kyaw Soe, Commented Aug 23, 2018 at 11:03

sandrooco · Accepted Answer · 2019-11-18 06:49:13Z

167

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, 2019 at 6:49

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

answered Aug 23, 2018 at 11:06

Kyaw Kyaw Soe

3,4001 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Bharath Pabba Over a year ago

but when i try the above code the browser still shows the code. Thanks

Bharath Pabba Over a year ago

yes. I used the same. The browser still shows the same

Kyaw Kyaw Soe Over a year ago

you have to generate project with npm run build

Kyaw Kyaw Soe Over a year ago

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

Pointer Null Over a year ago

Doesn't work: 'GENERATE_SOURCEMAP' is not recognized as an internal or external command, operable program or batch file.

|

jsnewbie · Accepted Answer · 2019-02-09 19:13:08Z

73

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 9, 2019 at 19:13

jsnewbie

1,83915 silver badges9 bronze badges

1 Comment

user1853517 Over a year ago

Correct solution with [email protected]

Ermiya Eskandary · Accepted Answer · 2024-05-05 00:22:03Z

46

Solution 1 (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

Solution 2

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"
      },

edited May 5, 2024 at 0:22

Ermiya Eskandary

24.4k4 gold badges58 silver badges72 bronze badges

answered Sep 4, 2020 at 17:12

Sky

4,3909 gold badges58 silver badges87 bronze badges

3 Comments

beltrone Over a year ago

set \"... windows trick works, cheers.

Sasindu Jayampathi Over a year ago

This method works...

adryx_92 Apr 2 at 15:43

Solution 1 is the preferred way. For solution 2 keep in mind that you're setting environment variables and that's why it's different between Windows and Linux.

Nehemie KOFFI · Accepted Answer · 2020-03-06 23:05:39Z

37

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 6, 2020 at 23:05

answered Mar 6, 2020 at 14:07

Nehemie KOFFI

1,46515 silver badges12 bronze badges

Comments

Raz · Accepted Answer · 2019-06-06 10:38:13Z

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 6, 2019 at 10:38

Raz

4548 silver badges6 bronze badges

2 Comments

Julha Over a year ago

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?

hsluoyz Over a year ago

This is the CORRECT answer. Tested on Win10. Thanks!

Krupal Patel · Accepted Answer · 2018-11-22 04:42:21Z

9

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, 2018 at 4:42

Krupal Patel

60210 silver badges13 bronze badges

4 Comments

Ponleu Over a year ago

This shall work, but not reasonable to follow. Better not to create *.map than to create and remove it.

Krupal Patel Over a year ago

@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.

Shivang Gupta Over a year ago

But when you load the application in browser, there will be 404 error for .map files

Johnny Oshika Over a year ago

@ShivangGupta I tested this in Chrome and Firefox and you'll only get a 404 on the source maps if you open dev tools.

venky royal · Accepted Answer · 2021-09-09 08:41:41Z

7

just add GENERATE_SOURCEMAP=false in .env

answered Sep 9, 2021 at 8:41

venky royal

2,3042 gold badges15 silver badges22 bronze badges

Comments

Toni · Accepted Answer · 2021-05-06 13:43:38Z

6

Put this one in your package.json

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

It works on Windows and Linux...

answered May 6, 2021 at 13:43

Toni

611 silver badge1 bronze badge

Comments

Phoenix · Accepted Answer · 2019-01-13 20:41:48Z

3

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.

answered Jan 13, 2019 at 20:41

Phoenix

4453 gold badges6 silver badges15 bronze badges

Comments

Kunal Burangi · Accepted Answer · 2019-07-15 05:34:12Z

1

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, 2019 at 5:34

Kunal Burangi

89211 silver badges18 bronze badges

Comments

Meghanath M S · Accepted Answer · 2024-06-15 04:07:52Z

1

install cross-env npm install cross-env --save-dev

Put this one in your package.json "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build", It works on Windows

answered Jun 15, 2024 at 4:07

Meghanath M S

213 bronze badges

Comments

Omar Faruq · Accepted Answer · 2025-02-23 06:07:26Z

0

If you're using Vite, update your vite.config.js:

export default defineConfig({
  build: {
    sourcemap: false, // Disable source maps
  },
});

answered Feb 23 at 6:07

Omar Faruq

1297 bronze badges

Collectives™ on Stack Overflow

How to disable source maps for React JS Application?

12 Answers 12

14 Comments

1 Comment

Solution 1 (Recommended)

Solution 2

3 Comments

Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

14 Comments

1 Comment

Solution 1 (Recommended)

Solution 2

3 Comments

Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related