Environment variables - undefined

Question

I want to use environment variables . I made a custom react app environment .

Everything is ok, the app runs properly, no errors. But the variables from .env file gives undefined and the process.env gives an empty object .

I added dotenv and REACT_APP prefix to the variable.

And in webpack.config.js file i added node: { fs: 'empty' } , from here

Here are my configurations .

Folder structure:

Answer 1

You have to put REACT_APP in front of the variable name you want to have

eg:/

REACT_APP_YOUR_VAR="something"

You don't need to install Dotenv or something else, because React has its own.

Answer 2

PROBLEM SOLVED:

1. Uninstall dotenv
2. Remove these two from main app.js file:

const dotenv = require('dotenv')
dotenv.config();

3. Remove the flag --env from npm start script.

4. Remove node: { fs: 'empty' } from webpack.config.js file

5. Install dotenv-webpack , and follow the instructions from there.

No need for REACT_APP prefix.

Fixed configuration files

Answer 3

try https://www.npmjs.com/package/dotenv to use .env variables

In your entry JS file add below code snippet (maybe your ./src/assets/js/app.js )

const dotenv = require('dotenv')
dotenv.config()

and restart your app.

Answer 4

You can use webpack.DefinePlugin

 plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        })
    ],

Then in your code simply use process.env.NODE_ENV to access ENV variable