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

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 2

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.