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

Cremona

Add your webpack.config.js to the question. – Keturahkeung

I didn't have a webpack.config.js file in my file structure – Cremona

What did you use to generate the project? – Keturahkeung

I use npm run start – Cremona

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) – Aleph

Sorry I didn't get you. How can I resolve this. – Cremona

@BharathPabba, for build you can enable it, I've answered it below – Aleph

Answer 1

just remove &&

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

Aleph

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

are you sure that your code is this "build": "GENERATE_SOURCEMAP=false react-scripts build" not this "build": "GENERATE_SOURCEMAP=false && react-scripts build" – Aleph

As you are new to React, i strongly advice you to gor for create-react-app option and follow the react documentation ;) – Sacerdotalism

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

you have to generate project with npm run build – Aleph

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 – Aleph

I cannot use serve on ec2 properly. Please reply if you can help me out this Issue #51996732 – Cremona

"build": "GENERATE_SOURCEMAP=false react-scripts build", Worked for me! – Dinger

The below answer is recommended – Eggert

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

@PointerNull use cross-env: "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build" – Philbrick

@Philbrick 'cross-env' is not recognized as an internal or external command, – Ewaewald

@B.ÖNER you have to install the module. – Philbrick

@Philbrick Thanks. It worked after installing using "npm install --save-dev cross-env" – Ewaewald

Answer 2

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

Blacksnake

Correct solution with [email protected] – Enwomb

Answer 3

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

Carruth

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

Answer 4

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

GENERATE_SOURCEMAP=false

Hylotheism

Answer 5

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

Buckeen

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? – Immunogenic

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

Answer 6

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.

Peirsen

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

@Dogmatics 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. – Peirsen

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

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

Answer 7

just add GENERATE_SOURCEMAP=false in .env

Outboard

Answer 8

Put this one in your package.json

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

It works on Windows and Linux...

Obstinate

Answer 9

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.

Fluviatile

Answer 10

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.

Ripuarian