.env file variables are cached

[mvehar]

.env changes are not propagated to code.

If you update .env, new values will not be detected until you change the file that imports the variables.

[goatandsheep]

are you re-building between .env changes?

[mvehar]

I'm using react-native run-ios, which reloads the code. Could be that babel modules are not reloaded until some code ts/js code changes.

[goatandsheep]

yeah unfortunately, you'll have to fully restart the script every time you change your .env file

[tronxdev]

I run react-native run-ios whenever I modify .env file. However, old environment variables are cached and leveraged again. What should I do to reset them?

[goatandsheep]

Oh! I think I know what's wrong. This is one of the caveats about this package. For now, try this and let me know if that fixes it:

rm -rf node_modules/.cache/babel-loader/*

I also want to see if we can observe changes and clear the cache going forward like in this other babel plugin https://github.com/codemix/babel-plugin-closure-elimination/blob/master/src/index.js

[tronxdev]

@goatandsheep Thank you! It eventually resolved the issue. Could you update the package?

[goatandsheep]

It will take time for me to figure it out. I'll update the security dependencies, but this feature will have to wait until next month unless someone can help me.

[SebinLee]

Oh! I think I know what's wrong. This is one of the caveats about this package. For now, try this and let me know if that fixes it:

rm -rf node_modules/.cache/babel-loader/*

I also want to see if we can observe changes and clear the cache going forward like in this other babel plugin https://github.com/codemix/babel-plugin-closure-elimination/blob/master/src/index.js

I have same problem, but It cannot solve my problem
I also cleared watchman, metro module cache, but nothing changes.
Both on android, iOS environment

[mvehar]

Maybe a temp solution for updating package.json scripts:

"cc": "rimraf node_modules/.cache/babel-loader/*,",
"android": "npm run cc && react-native run-android",
"ios": "npm run cc && react-native run-ios",

[TJTorola]

Repost from zetachang/react-native-dotenv#70, after a lot of digging, I think this babel/babel#8497 is really what react-native-dotenv needs to get this fixed. Seeing as there is currently no way to tell babel that the .env file is a dependency requiring a new build react-native-dotenv cannot possibly get it to rebuild when the env file changes.

I think I have a partial workaround though, changing metro.config.js to include:

const crypto = require('crypto');
const fs = require('fs');

let hash = crypto.createHash('sha256');
hash.update(fs.readFileSync('.env'));
const cacheVersion = hash.digest('hex');

module.exports = { // eslint-disable-line import/no-commonjs
  ...
  cacheVersion,
};

See: https://facebook.github.io/metro/docs/configuration#cacheversion

This results in metro using the hash of the .env file as a cache key and therefore invalidates the cache when the env file changes. I don't believe this will work for live reloading, you would still need to restart react-native whenever the env or any files using it changes, but we've been running with this for some time and haven't had anymore env caching issues.

This is particularly pressing for us because our CI agents build JS bundles for 3 different environments in an unpredictable order so any env caching between those could cause a production outage for us. But thankfully we haven't seen that for the last few months since doing this change.

[TJTorola]

Looks like babel/babel#11741 might provide a proper solution here also?

[bhailot]

when I ran "rm -rf node_modules/.cache/babel-loader/*", got module not found error. I do not see .cache folder inside node_modules

[kingdavidmartins]

@TJTorola zetachang/react-native-dotenv#70 (comment)
I have experienced this issue a couple of times.I know this doesn't solve the underlying issue with pertaining to live re loads

But when you cp or update your .env with new values before running your code push command you can pass the --extra-bundler-option="--reset-cache" flag

Example

appcenter codepush release-react -a ${app} --mandatory true -t ${version} --output-dir ./build --deployment-name ${deployment} --extra-bundler-option="--reset-cache"

after env swaps the new env values should be picked up when you codepush

[TJTorola]

@kingdavidmartins Yeah, that works as well. My goal with hashing the .env file is that it does basically that, but automatically. Though, when doing a appcenter release it's probably best to ditch the cache every single time just to be safe like you have there.

[goatandsheep]

@TJTorola anything we can do to the library to automatically do this? I'm happy to accept any PRs. I really want to resolve this.

[TJTorola]

@goatandsheep I'm not sure, I don't think it can be properly fixed without babel/babel#11741 getting patched first.

[perroudsky]

for expo users,
expo r -c
did the job !

[hatemalimam]

this should help
yarn start --reset-cache

Possibile duplicate: zetachang/react-native-dotenv#24

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chouaibemir]

npm start -- --reset-cache

is the solution for this

[mvehar]

Another approach with embedding the reset unto run-* commands
Android:
extraPackagerArgs: ["--reset-cache", ...],
inside app/build.gradle

IOS:
Edit scheme->Run-> add
EXTRA_PACKAGER_ARGS='--reset-cache' under ENV variables.

[taylorkline]

@goatandsheep I think this issue should be re-opened, and perhaps even pinned. This is not an issue with babel-loader so the caveat currently in the README does not address this issue (I do not have babel-loader in my yarn.lock nor do I have the node_modules/.cache directory).

This issue can be reproduced by initializing a new React Native project with:

npx react-native init MyApp --template react-native-template-typescript

And then adding this dependency. Until yarn start --reset-cache is provided, no environmental variables appear within the app, and no changes are reflected until the cache is reset again.

[goatandsheep]

@taylorkline HM... Sorry to hear about the continuing issues. What do you recommend we do? React native uses babel. If you have issues and it's not using babel loader but it's solved with this other yarn command that is also included in the readme, then isn't it solved? How can I help?

[taylorkline]

If you have issues and it's not using babel loader but it's solved with this other yarn command that is also included in the readme, then isn't it solved?

Ah, I see. I had a misunderstanding.

As it's currently written, the caveats section sounds like it only applies specifically to people who might have manually added a babel caching solution.

Since this issue of caching applies to the majority of users, including anyone who adds this project to a new React Native project, I would really suggest adding something like:

"You must clean the babel cache after each change to your environmental variables using yarn start --reset-cache or, if using expo, expo r -c."

up more prominently within the Usage section of the README.

Thanks for hearing me @goatandsheep

[goatandsheep]

That's good feedback 👍 I'll try to improve the readme to clarify

[cgallivanpam]

I have tried everything from expo r -c to yarn start --reset-cache. I think at the end of the day it may require a computer restart... thanks @goatandsheep for working on a solution. I see you all accross the forums working on this. 🙏

[goatandsheep]

please test the next version https://www.npmjs.com/package/react-native-dotenv/v/3.4.0 if I get 3 thumbs up from the post I'll publish this as the proper change

[GoaGit]

@goatandsheep I've tested v3.4.0 and experience the following issue (using Expo and v3.3.1 of react-native-dotenv this particular issue does not occur). I haven't changed anything, other that installing the v3.4.0 version of react-native-dotenv.

I will look into this in more detail, but perhaps you can spot the issue right away.

This issue only seems to appear in the web mode of Expo.

C:/Users/USER/AppData/Roaming/npm/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js
Module build failed (from C:/Users/USER/AppData/Roaming/npm/node_modules/expo-cli/node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\react-dev-utils\webpackHotDevClient.js: api.addExternalDependency is not a function (While processing: "Z:\\app\\node_modules\\react-native-dotenv\\index.js")
    at module.exports (Z:\app\node_modules\react-native-dotenv\index.js:105:7)
    at C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\lib\config\full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:261:32)
    at evaluateAsync (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:291:5)
    at Function.errback (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:113:7)
    at errback (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:188:17)
    at onFirstPause (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\lib\config\caching.js:68:46)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor (C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\lib\config\full.js:235:43)
    at loadPluginDescriptor.next (<anonymous>)

[TJTorola]

@goatandsheep I'll try and take a look at that version sometime this or next week.

[wcastand]

Tested on 3.4.0 and the env are not updated without --clear still.
i have a ROOT_API in .env
and one in .env.staging

and switching between both this doesn't change the ROOT_API unless i do --clear :)

    "start": "NODE_ENV=development expo start",
    "start:staging": "NODE_ENV=staging expo start",

my babel config

 [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
        },
      ],

[github-actions]

Hey, thank you for opening this issue! 🙂 To boost priority on this issue and support open source please tip the team at https://issuehunt.io/r/goatandsheep/react-native-dotenv/issues/75

[alequint8912]

this should help yarn start --reset-cache

Possibile duplicate: zetachang/react-native-dotenv#24

Thanks thats work for me!!

[danteyc]

this should help yarn start --reset-cache

Possibile duplicate: zetachang/react-native-dotenv#24

Thanks. Thats work for me

[liuyankit]

Nothing mentioned above seems to work for my expo project mixed up with react web stuffs

[himgodfreyho]

None of the above solutions worked for me, and finally this works: zetachang/react-native-dotenv#24 (comment). And this is super annoying as if I have 10 files using the environment variable, I have to change all the files...

[XAMEUS]

None of the above solution worked for me, but I just found the cached files and removed them.

First, to search where was the cached files (with expo, but you might be able to find them elsewhere without it) :

grep . -rne "API_URL"

I then found it in .expo/web/cache/development/babel-loader/481dd7b81fe573de380af60e33e4c7b2.json.
Therefore to regenerate it, I just cleaned it (and restart the app):

rm -rf .expo/web/cache

[himgodfreyho]

None of the above solution worked for me, but I just found the cached files and removed them.

First, to search where was the cached files (with expo, but you might be able to find them elsewhere without it) :

grep . -rne "API_URL"

I then found it in .expo/web/cache/development/babel-loader/481dd7b81fe573de380af60e33e4c7b2.json. Therefore to regenerate it, I just cleaned it (and restart the app):

rm -rf .expo/web/cache

Man you save my day!!!! This works thanks.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

Hey, thank you for opening this issue! 🙂 To boost priority on this issue and support open source please tip the team at https://issuehunt.io/r/goatandsheep/react-native-dotenv/issues/75

[alessandrogelmi]

I'm still having the same problem

[Michael-Davison]

still having issues on expo 45. Have tried every solution in here.

[haotangio]

Tried all solutions above and none worked for me.

This nuke worked (as usual :)).
rm -rf node_module && npm i

Cheers!

[esphung]

Having same issue in 2023

[goatandsheep]

Hi @esphung issues specific to that environment no longer exist. Please open a new ticket explaining your setup