.env variable returns undefined in React JS app

Question

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

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

REACT_APP_OTHER_OTHER_THING=asdfas

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

Justinus Amadia Wijaya · Accepted Answer · 2021-03-08T07:57:14.197

5

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! :)

edited Mar 08 '21 at 07:57

answered Jan 09 '20 at 06:54

Justinus Amadia Wijaya

121
1
1
8

3

It would be great to add the related portion of article just in case the url may become invalid some day – Morteza Tourani Aug 27 '20 at 07:37
I only restarted my server and it worked perfectly. – Marvelous Ikechi Aug 20 '21 at 13:41

Deepak kumar debug · Answer 2 · 2020-09-07T17:24:54.897

5

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

edited Sep 07 '20 at 17:24

answered Sep 07 '20 at 17:17

Deepak kumar debug

375
3
7

score 1 · Answer 3 · answered Jan 06 '20 at 06:37

1

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.

answered Jan 06 '20 at 06:37

Rizabek Mukanov

41
4

my bad, I retyped them in the question, not copy it from the one I typed on my command prompt, thank you for the revision - I'm sorry, my first time posting question here :( – Justinus Amadia Wijaya Jan 06 '20 at 06:42
for the NODE_ENV, I know the value would be "development", I printed it out to see if the process.env is actually working. the problem I'm seeing is that process.env.NODE_ENV is working just as said in the docs, but not about the variables I made in .env file – Justinus Amadia Wijaya Jan 06 '20 at 06:45
@JustinusAmadiaWijaya can you share your .env file? – Rizabek Mukanov Jan 06 '20 at 09:21
my .env file only consists of a line written --> REACT_APP_OTHER_OTHER_THING=asdsafas – Justinus Amadia Wijaya Jan 07 '20 at 04:35

score 1 · Answer 4 · answered Mar 23 '23 at 10:28

1

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!

answered Mar 23 '23 at 10:28

Manish Patil

11
2

score 0 · Answer 5 · answered Oct 28 '20 at 19:26

0

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.

answered Oct 28 '20 at 19:26

Ricardo Bautista

106
3

score 0 · Answer 6 · answered Jul 26 '23 at 06:42

Please check these things first:

the variable must be prefixed with REACT_APP_ eg: REACT_APP_WEBSITE_NAME=hello
You need to restart the server to reflect the changes.
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.

David · Answer 7 · 2021-07-30T18:32:45.917

-2

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

edited Jul 30 '21 at 18:32

answered Jan 06 '21 at 14:45

David

895
8
12

.env variable returns undefined in React JS app

7 Answers7

D:\your-react-project \ .env