Create-react-app: How set the environment variable: process.env.GENERATE_SOURCEMAP

[ReactGirl]

I just don't want to put false on this line in the ejected create-react-app webpack.config.js:
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

How can I proper set this process.env to false?

[iansu]

I'm not entirely sure what you're asking. If you are looking to use this flag to disable sourcemap generation you can do so by running GENERATE_SOURCEMAP=false npm build.

[ReactGirl]

After Ejecting the create-react-app (latest version, which webpack 4) the webpack.config.js contains the following line:

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

What I'm asking is, as I dont want this maps in my production build (I was wondering, who would?!?) instead of just set it to false (which works), where I can set the process.env.GENERATE_SOURCEMAP to false to have the webpack read from the variable value? (My guess is that it is currently undefined).

[eladmotola]

You can create .env file as described here:
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#docsNav

Hope it helps

[ReactGirl]

According to the documentation, to read a variable from .env it should start with REACT_APP_.

Based on that, why the current variable name is process.env.GENERATE_SOURCEMAP instead of process.env.REACT_APP_GENERATE_SOURCEMAP for instance?

My point is, should not be in somewhere else the right way to change this instead of create a new variable in .env?

[heyimalex]

They need to be prefixed with REACT_APP_ to show up in your _application_ code. But any environment variables used by create-react-app don't need to be prefixed.

Think of it like this; create-react-app is a program that _builds_ another program. The program that's created ends up in build and, generally speaking, will be public when you publish it online as end users need to run it in their browser. The code you write in src/ and your environment variables are the inputs to this program-creating program. Sometimes you want to configure create-react-app, and for that you just pass in the specified environment variables. But sometimes you want to inject variables _into the output program_, and for that you need to prefix them with REACT_APP_. This is for security reasons; because everything in build is effectively public to anyone who accesses your site, you don't want any private environment variables to leak through. The required prefix is you opting in.

I dont want this maps in my production build (I was wondering, who would?!?)

They're often helpful for debugging errors in production. Everything in your production app is public anyway, so you're not leaking anything _private_ per se, but I can understand why not everyone would want to release their uncompiled source code.

should not be in somewhere else the right way to change this instead of create a new variable in .env?

Like iansu said, you can just call GENERATE_SOURCEMAP=false npm build, which sets the GENERATE_SOURCEMAP environment variable to false and then calls npm build. You can place this in your package.json under "scripts" as "build": "GENERATE_SOURCEMAP=false npm build". If you're on windows you may need to set the environment variable differently.

[nikolasveneti]

If you're on windows you may need to set the environment variable differently.

On windows you will have to create a .env file in your root folder and include this exactly : GENERATE_SOURCEMAP=false

Enjoy your project!