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