REACT_APP_* custom variables in .env* are undefined in development

Is this a bug report?

yes

Can you also reproduce the problem with npm 4.x?

It’s not an npm or yarn error

Which terms did you search for in User Guide?

custom environment variables

Environment

1. node -v: 8.6.0
2. npm -v: 5.5.1
3. yarn --version (if you use Yarn): 1.3.2
4. npm ls react-scripts (if you haven’t ejected): 1.0.17

Then, specify:

1. Operating system: macOS 10.11
2. Browser and version (if relevant): chrome

Steps to Reproduce

As the documentation specified, front end environment variables can be defined by exporting them to the terminal, defining them on the start script of with a .env file on the root.

My create-react-app is nested inside a backend express app with its own .env. However, I have a .env in the root of my front end app with REACT_APP_HOST=localhost.

In App.js, I console.log(process.env) and the only keys displayed are

{ NODE_ENV: 'development', PUBLIC_URL: '' }

It seems like its working for most other users and it may be that my app is nested but I’m unsure as to why environment variables defined in my .env are not showing up.

// .env
REACT_APP_HOST=localhost

// App.js
....
componentDidMount() {
    console.log(process.env);
}

// app structure
- fullApp
   - create-react-app
      - components
         - App.js
      - .env
   - index.js
   - .env

react-scripts@1.0.17

[suzyng83209]

Actually I have found out the reason why.

I did not realize that the environment variables are injected in build-time. (Don’t know why I assumed they would be accessible in dev)

Thanks for your help though.

[pmkgithub]

Having a similar issue with .env.development and .env.production custom env files - REACT_APP* env vars are undefined in my React code.

However, .env is working properly and my REACT_APP* env vars are properly exposed in my React code.

mac OS High Sierra v 10.13.6 node: v 8.11.2 npm: v 5.6.0 react-scripts: v 2.1.1

Additionally, I can verify the existence of these three files and their env var values via $cat .env.development and $cat .env.production and $ cat .env

This CRA app is a nested React app inside a node/express server directory. There are no .env, or .env* files in the root server directory. The .env, .env* files are in the root CRA app directory only.

Restarting server, closing IDE or clearing Browser cache does not remedy things.