plugin works only once

[sylver]

Once installed the plugin works as expected (loading my .env vars in process.env being used in webpack and all), but after a node reload or any changes, it suddenly stops to populate process.env.

I can make it to "work" again either by changing in .babelrc the path option value (which I should not need, my .env is at the root of my repository) or by running a new yarn install --dev babel-plugin-inline-dotenv to clean it up, which makes me wondered if there's some sort of cache messing up here ? Once it stops working for a specific .env path, it won't use it again no matter what until reinstalled.

node version : 9.11.1

package.json (relevant part)

"@babel/cli": "^7.0.0-beta.42",
"@babel/core": "^7.0.0-beta.42",
"@babel/node": "^7.0.0-beta.42",
"@babel/preset-env": "^7.0.0-beta.42",
"@babel/preset-react": "^7.0.0-beta.42",
"@babel/preset-stage-0": "^7.0.0-beta.42",
"@babel/register": "^7.0.0-beta.42",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-inline-dotenv": "^1.1.2",
"babel-plugin-transform-require-ignore": "^0.1.1",

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-stage-0"
  ],
  "plugins": [
    ["inline-dotenv"]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    },
    "node": {
      "plugins": [
        "dynamic-import-node",
        [
          "transform-require-ignore",
          {
            "extensions": [".sass", ".scss", ".less"]
          }
        ]
      ]
    }
  }
}

[brysgo]

Hey thanks for reporting this, I think you are experiencing caching issues, when you change the environment variables you have to clear out your cache.

Unless you are saying that the variables aren't getting set at all.

[sylver]

Hey Brian,

Yep, that’s what I’m saying, the variables are set at the first run but as soon as my node server reloads itself (nodemon) or I restart it myself (same behavior for dev run or prod build btw) the variables aren’t set at all anymore.

— Richard

On 12 Apr 2018, at 16:01, Bryan Goldstein [email protected] wrote:

Hey thanks for reporting this, I think you are experiencing caching issues, when you change the environment variables you have to clear out your cache.

Unless you are saying that the variables aren't getting set at all.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[brysgo]

Hmm... Could it be hot loading? If the process that watches your changes didn't have the environment variables set maybe that would do it? I'm not sure how to test this hypothesis.

[sylver]

@brysgo I thought about it but it seems unlikely, the fact env variables get unset is really random, either while the dev server is running (and reloading) or when running several prod builds in a row.

Maybe I did something wrong but I'm clueless here.

If you want you can give it a try with this repo : https://github.com/sylv3r/react-starter

[FadiAboMsalam]

am facing a bit different problem i actually followed nextjs example on with dot-env which uses this plugin what happens with me is that the environment variable are always loaded but not changed please have alook at my bug here https://github.com/zeit/next.js/issues/4748 i have changed one variable inside the .env and it still loads the old value of the variable and yes it seems like caching issues but how to solve them :D any suggestions ?

[FadiAboMsalam]

btw removing node_modules and reinstall them again seems to solve the issue but it definitely not the best approach to solve this !

[brysgo]

@FadiAboMsalam - Unfortunately the transformed code is cached with the old variable values. You can remove just the cache (which is likely stored inside your node_modules folder in some cache dotfiles), but I would love to find a better solution to this!

[andreametelli]

same problem. When I run

nodemon -w src --exec \"babel-node src/bin/www --presets es2015,stage-0\"

the first time it set env correctly. When I restart the server I see the env in the process.env but seems that babel not applies them to the project. Any suggestions?

[brysgo]

@andreametelli - you might be experiencing caching issues, make sure you don't have any cache directory set, and if you do, delete it

[andreametelli]

@brysgo I already deleted my cache. I noticed that using nodemon with babel-node the plugin loads the configuration only if I save the main file of my project also if I didn’t modified it. If I save an other file nodemon restarts correctly but without load the config.

[brysgo]

@andreametelli - interesting, could nodemon + babel-node be running the babel plugin from a different path?

[andreametelli]

@brysgo I don’t think so, because i usually work without es6 modules. It was my first experience with them. Usually using nodemon with node command i can save any file and nodemon restarts the application correctly also loading all the configuration from dotenv. Using babel-node the behavior is different. As i told before, when i save a file that is not the main file it will restart without loading the specific envs.

[brunohkbx]

Any update on this?

[brysgo]

@brunohkbx - I'm not really sure how to triage this, but if you have any thoughts I'm all ears.

[ankhzet]

For react-native folks: you should clear Metro cache (restart it with Shift+R) after changing .env file.

[beaumontjonathan]

For those stumbling on this: babels caching has no visibility into where environment variables are used, and so which files are invalidated by a change to your .env. (For those novices like me who want to take a peak, look in node_modules/.cache/@babel/register/.babel.X.Y.Z.dev.json and do a quick search for your env vars)

Disabling the babel cache prevents cached env values, but will increase build times. For my small project this is negligible and babel is still ⚡

Try running BABEL_DISABLE_CACHE=1 yarn ..., this works great for me with nodemon/TS for live-reloading when editing my .env