.env file not updating in local environment in react js

Question

I do have a .env file in my react project and using dotenv package to read the environment variables. I did a console log of the environment variables. I had initialized few variables in the beginning in .env file and was being read perfectly.

Later I changed some data in the .env file and restarted the local server, but new changes were not being reflected. EVEN after deleting the .env file and starting the server, the same old variables are loaded. I know it's a cache issue but could not figure out a way to reset it.

I am using npm start command to start the server.

Vinay Sharma · Accepted Answer · 2022-02-10 08:35:44Z

21

Use REACT_APP prefix

You need to declare variables with REACT_APP prefix as per the documentation.

REACT_APP_API_KEY = 'XXXXXXXX'
REACT_APP_AUTH_DOMAIN = 'XXXXXXXX'
REACT_APP_DATABASE_URL = 'XXXXXXXX'
REACT_APP_PROJECT_ID = 'XXXXXXXX'
REACT_APP_STORAGE_BUCKET = 'XXXXXXXX'
REACT_APP_MESSAGING_SENDER_ID = 'XXXXXXXX'
REACT_APP_API_ID = 'XXXXXXXX'
REACT_APP_MEASUREMENT_ID = 'XXXXXXXX'

And similarly, access them with the prefix in your code

console.log(process.env.REACT_APP_PROJECT_ID);

Note: You need to restart the dev server every time you update the env file to consume the changes.

edited Feb 10, 2022 at 8:35

answered Sep 17, 2021 at 6:08

Vinay Sharma

3,8676 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ankit Shah Over a year ago

I did initiate every variable with REACT_APP_ but no effects when I change variables data or remove some variables

Vinay Sharma Over a year ago

@AnkitShah you would need to show code for better debugging. Also, what's the name of file you're using for variables?

Ankit Shah Over a year ago

Got it right, it was some cache issue. i used --reset-cache with the start command and restarting the system helped. Thanks.

Yassine CHABLI · Accepted Answer · 2022-04-07 14:10:06Z

9

Changing env variables requires to restart node server to take the new values.

But sometimes , it doesn't work , so you mush apply a cache reset.

npm start --reset-cache

answered Apr 7, 2022 at 14:10

Yassine CHABLI

3,7822 gold badges28 silver badges47 bronze badges

1 Comment

vidur punj Over a year ago

This will update the env.js used in caching the env variable, if we are using react-dotenv in react application.

Ian · Accepted Answer · 2024-05-19 04:05:01Z

1

For React Native, I had to delete the app from my simulator and clean my build folder in XCode and then ran start with --reset-cache.

answered May 19, 2024 at 4:05

Ian

2,8001 gold badge25 silver badges35 bronze badges

Comments

eoan · Accepted Answer · 2024-01-03 15:26:55Z

0

I ran into this issue a few random times before, and unfortunately, the answers above didn't fix it for me. I noticed if I changed the .env variable e.g. from REACT_APP_SERVER_URL to REACT_APP_SERVER_URL_2 it changes, which proves it is some sort of weird caching issue.

What works for me is just committing all your changes, push to Github, delete the whole repo and re-clone it 🤷🏻‍♂️.

answered Jan 3, 2024 at 15:26

eoan

1111 silver badge10 bronze badges

Comments

J-peace · Accepted Answer · 2024-01-08 19:47:26Z

0

First:

node node_modules/react-native/local-cli/cli.js start --reset-cache

Then:

press 'r'

To debug, make sure you are logging the variable after it is called:

import { REACT_APP_PUBLIC_URL_LOCAL } from '@env';

let baseURL = REACT_APP_PUBLIC_URL_LOCAL;

console.log('this is my variable ------>', baseURL)

answered Jan 8, 2024 at 19:47

J-peace

1801 silver badge7 bronze badges

Comments

Rolf · Accepted Answer · 2024-01-17 22:53:44Z

0

Found this trick on Github:

Manually edit the file importing react-native-dotenv by either adding an empty line or whitespace will work.

https://github.com/zetachang/react-native-dotenv/issues/24#issuecomment-581125204

answered Jan 17, 2024 at 22:53

Rolf

5,7915 gold badges45 silver badges63 bronze badges

Comments

PeteW · Accepted Answer · 2025-04-15 17:16:12Z

0

I found that my shell had already defined these variables, and then it didn't seem that env.local was updating them. So in your shell, with the app not running, list all the environment variables by running declare -p | grep "REACT_APP". If this gives you something you can get rid of the variables by (for example) unset REACT_APP_AWS_API_KEY.

It looks like there's a bug in VSCode at the moment as well (10 April 2025) - try unset VSCODE_ENV_REPLACE. Check you've deleted everything by typing declare -p | grep "REACT_APP" again.

answered Apr 15 at 17:16

PeteW

7316 silver badges9 bronze badges

Collectives™ on Stack Overflow

.env file not updating in local environment in react js

7 Answers 7

Use REACT_APP prefix

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Use REACT_APP prefix

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related