Create-react-app: Empty REACT_APP_ env vars in .env.production cannot override its counterpart in .env

[MrOrz]

Is this a bug report?

Yes.

When an REACT_APP_ environment variable is set in .env, we cannot overwrite it with an empty string.

In our scenario, our app tries to connect to an development API server running on local machine, but in production the static files built with npm build will be served directly with API server. The host name is set through an REACT_APP_ENDPOINT environment variable, with it being localhost in .env and being an empty string in .env.production. However, the empty string somehow cannot override the settings in .env.

In reality I worked-around this by putting REACT_APP_ENDPOINT in .env.development.
Also, for API servers we can also use proxies instead. However, I think it's still a bit counter-intuitive that settings in .env.production cannot override the one in .env. That's why I opened this issue.

Did you try recovering your dependencies?

It's reproducible in fresh install of create-react-app

Which terms did you search for in User Guide?

• env then read through "Adding Custom Environment Variables"

Environment

1. node -v: v8.9.0
2. npm -v: 5.5.1
3. npm ls react-scripts (if you haven’t ejected): [email protected]

Then, specify:

1. Operating system: Mac OSX

Steps to Reproduce

1. Create .env and write REACT_APP_ENDPOINT=http://localhost:8080
2. Create .env.production and write REACT_APP_ENDPOINT=
3. inApp.js put:

console.log('ENDPOINT', REACT_APP_ENDPOINT} + '/api');

1. npm run build
2. Manually open the built main..js, search for 'ENDPOINT: '

Expected Behavior

Find this in the built js:

console.log('ENDPOINT', '/api');

Actual Behavior

Find this in the built js:

console.log('ENDPOINT', 'http://localhost:8080/api')

Reproducible Demo

Repo

https://github.com/MrOrz/create-react-app-env-override/

Relevant file

• App.js
• .env
• .env

[iansu]

This does sound like a bug. I took a quick look at the dotenv source and it does allow you to set an empty environment variable. The empty value in .env.production should take precedence over the non-empty value in .env.

I think the workaround you came up with is a better way to handle this situation anyway but we should still look into what's going on here.

[heyimalex]

It looks like this was fixed in dotenv here. So, looks like we need to wait for 5.0 release.

[iansu]

Looks like 5.0 was released a couple of weeks ago so we just need to upgrade. Too bad we didn't notice that before the 1.1.1 release yesterday. 😞

[Timer]

Since this is potentially breaking for others who may rely on the behavior it's probably better to do this in 2.x only [dotenv called it a major].

[iansu]

Makes sense. I've submitted a PR to next only at this point. I won't make one of 1.x.

[gaearon]

The fix will be available in the next 2.x alpha.
https://github.com/facebook/create-react-app/pull/4009#issuecomment-364684770

[bcarroll22]

Hey everyone, just wanted to point out that I'm still running into this issue. I believe the bug here is actually being introduced by dotenv-expand. When I take it out, the variable overrides behave correctly, but something in the expand package causes issues that allow empty strings to be overridden.