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

[suzyng83209]

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

[Timer]

It doesn't look up your directory tree into fullApp/.env. The only file it reads is fullApp/create-react-app/.env.

Please make sure it's in the correct file.

[Timer]

If you exported REACT_APP_HOST in your shell, that overrides any .env setting as well.

[suzyng83209]

I have not. In fact, process.env does not have any custom react vars when I log it out

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

[ghost]

So you can't use them in development ?!?

[Timer]

So you can't use them in development ?!?

Yes, you can. Are you experiencing behavior otherwise? If so, please file a new issue.

[jeroenhoebe]

Having the same problem on my hackintosh (OSX 10.11.6)
node: v10.3.0
npm: 6.4.1
react-scripts: 2.0.4

But the same project/code does work on my MacBook Pro (macOS 10.13.6)
node: v10.1.0
npm: 6.4.1
react-scripts: 2.0.4

[LuizFellype]

@jeroenhoebe I am having the same issue em MacBook here!

[vivmagarwal]

Re-starting the server may resolve the issue for most (If .env files were created while server was running)

control + c to stop the server
yarn start to start the server

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

[moparlakci]

You should not put your env files in the src folder, put it in the folder above.. ;)

[Luckygirlllll]

the same problem, I have restarted server, but variable is still undefined