score:5

Accepted answer

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

score:-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

score: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.

score: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.

score:4

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


Related Query

More Query from same tag