Skip to content

Empty REACT_APP_ env vars in .env.production cannot override its counterpart in .env #4002

Closed
@MrOrz

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions