I am working on this react app and thinking of adding some environment variables inside, this is what I've done:

1. installed the latest version of react-scripts
2. added .env file on the root folder (the same location where node_modules folder is)
3. added REACT_APP_OTHER_OTHER_THING=asdfas just to test the variable

REACT_APP_OTHER_OTHER_THING=asdfas

4. open index.js and console.log(process.env.REACT_APP_OTHER_OTHER_THING) inside to see the output

import React from 'react';
import Reactdom from 'react-dom';
import App from './App';

console.log(process.env.REACT_APP_OTHER_OTHER_THING, 'DOTENV')

Reactdom.render(<App/>, document.getElementById("app"))

then I rebuilt the app and started the app to see the result but then it gives out undefined as the output for process.env.REACT_APP_OTHER_OTHER_THING. I then tried to print process.env.NODE_ENV (which is working and prints "development" as output).

note: I have also tried to add temporary variable as the docs said in /docs/adding-custom-environment-variables >> rebuilt the server and run ($env:REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start) << due to me running it on powershell which still gives undefined as output.

is there anything I can do on this? thank you

I am working on this react app and thinking of adding some environment variables inside, this is what I've done:

1. installed the latest version of react-scripts
2. added .env file on the root folder (the same location where node_modules folder is)
3. added REACT_APP_OTHER_OTHER_THING=asdfas just to test the variable

REACT_APP_OTHER_OTHER_THING=asdfas

4. open index.js and console.log(process.env.REACT_APP_OTHER_OTHER_THING) inside to see the output

import React from 'react';
import Reactdom from 'react-dom';
import App from './App';

console.log(process.env.REACT_APP_OTHER_OTHER_THING, 'DOTENV')

Reactdom.render(<App/>, document.getElementById("app"))

then I rebuilt the app and started the app to see the result but then it gives out undefined as the output for process.env.REACT_APP_OTHER_OTHER_THING. I then tried to print process.env.NODE_ENV (which is working and prints "development" as output).

note: I have also tried to add temporary variable as the docs said in https://create-react-app.dev/docs/adding-custom-environment-variables >> rebuilt the server and run ($env:REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start) << due to me running it on powershell which still gives undefined as output.

is there anything I can do on this? thank you

• javascript
• reactjs
• powershell
• environment-variables
• dotenv

7 Answers 7

Ensure it has correct directory tree

D:\your-react-project \ .env

• Here it maybe your-react-project \ .env.development

It should be in the path of where default README.md placed

Alright, the problem I'm having seemed to be from the webpack I made in my React App,

I tried to follow the instruction from this article and it's working well!

after configuring my webpack, I rebuilt it, restart the server, and it works!

edit: for my solution, I added:

const dotenv = require('dotenv');

const env = dotenv.config().parsed;

const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev; }, {});

at the top of webpack.common.js

and also added

    plugins: [
        new webpack.DefinePlugin(envKeys), //this line
    ]

in the module.exports in the plugin. I hope this helps! :)

Can't comment, so i will post an answer, sorry.

Are you sure about ($REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start), because docs says ($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

I just added new env var, and it gave me undefined, but after server restart it worked just fine. Can you try to restart server, but add env variable not in terminal, but inside .env file?

UPD1: just so you know, NODE_ENV is set by npm start or npm run build commands, they set to development or production, respectively.

As docs says:

You cannot override NODE_ENV manually. This prevents developers from accidentally deploying a slow development build to production.

Actually problem with VS Code Editor

Create a .env file using the terminal in the project root directory

touch .env 

and then it is working fine!

Please check these things first:

1. the variable must be prefixed with REACT_APP_ eg: REACT_APP_WEBSITE_NAME=hello

2. You need to restart the server to reflect the changes.

3. Make sure you have the .env file in your root folder(same place where you have your package.json) and NOT in your src folder.

This worked for me with the same issue. I double-checked everything was connected correctly then killed my server in the terminal after started it back up & it worked fine.

Other causes of undefined environment variables on a much simpler level than the op's Webpack configuration question include:

• Leaving out process.env.REACT_APP_SERVER_URL and just writing REACT_APP_SERVER_URL in your code

• Forgetting to name the environment variable with REACT_APP as the first part of the string