Parcel: Environment variables are not updated

[abellion]

🐛 bug report

I'm using dotenv to load environment variables from a .env file ; that's convenient to change their value quickly. Though, right now I always need to restart parcel in order to have them changed inside the bundle.

🎛 Configuration (.babelrc, package.json, cli command)

parcel watch server/index.js -d dist/server --target=node

🤔 Expected Behavior

The bundle should contains updated environment variables.

😯 Current Behavior

Only environment variables from when parcel was launched are alive.

💁 Possible Solution

Maybe don't cache env vars ?

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | latest of 1.8.x
| Node | 8 LTS
| npm/Yarn | latest npm
| Operating System | Linux ce3280140caf 4.9.87-linuxkit-aufs #1 SMP Wed Mar 14 15:12:16 UTC 2018 x86_64 GNU/Linux

[DeMoorJasper]

We should probably add the env variables to the cache key

[muratg]

Any updates? Also, any workarounds? I can manually clear the cache, but I'd rather not.

[BrOrlandi]

I want to know a workaround too. It's impossible to change env vars here, even removing the cache, the variables still cached! This bug is really annoying and I don't know how to fix it. 😞

[cyrilchapon]

Problem is also appearing when targetting browser with babel environment variables plugin.

[mischnic]

Does parcel rebuild when an env file is changed (and the env variables don't update) or does just nothing happen on edit?

[cyrilchapon]

Nothing happens, furthermore, if ctrl+c the parcel again, the cache is restored and the new env var values are not reflected in the code

[mischnic]

if ctrl+c the parcel again, the cache is restored and the new env var values are not reflected in the code

That part is working for me.

.env:

SOMETHING="yes!!"

```html

```js
console.log(process.env.SOMETHING);

[cyrilchapon]

Hum. Not for me.

index.html

<script src="./index.js"></script>

index.js

console.log(process.env.FOO)

cmd

> rm -rf .parcel-cache dist
> FOO=bar parcel build src/index.html --cache-dir .parcel-cache
> http-server dist

✨  Built in 23.04s.

dist/src.050c5e28.map        ⚠️  5.67 MB     338ms
dist/src.050c5e28.js          ⚠️  1.9 MB    22.16s
dist/src.6a665fea.css          23.09 KB     6.17s
dist/favicon.8d872578.ico      16.56 KB     307ms
dist/index.html                   535 B     460ms

result

// bar

---

Now change it

cmd

^Chttp-server stopped.
> FOO=something parcel build src/index.html --cache-dir .parcel-cache
> http-server dist

✨  Built in 1.91s.

dist/src.050c5e28.map        ⚠️  5.67 MB    376ms
dist/src.050c5e28.js          ⚠️  1.9 MB    1.36s
dist/src.6a665fea.css          23.09 KB     36ms
dist/favicon.8d872578.ico      16.56 KB     16ms
dist/index.html                   535 B      9ms

Wrong result

// bar

---

Now try with a .env file

.env

FOO=something_else

cmd

^Chttp-server stopped.
> parcel build src/index.html --cache-dir .parcel-cache
> http-server dist

✨  Built in 2.11s.

dist/src.050c5e28.map        ⚠️  5.67 MB    402ms
dist/src.050c5e28.js          ⚠️  1.9 MB    1.37s
dist/src.6a665fea.css          23.09 KB     23ms
dist/favicon.8d872578.ico      16.56 KB     21ms
dist/index.html                   535 B    278ms

Wrong result

// bar

---

NB1: mind the fact that the digest in the asset slug name did not change after the rebuild
NB2: dotenv or inline environment variables changes nothing

[cyrilchapon]

As a workaround, for now, considering these 2 facts:

• Having the rebuild-from-cache feature is mostly safe and intersting during fast development iterations and source code updates
• Anyway, everyone is used to have to restart the server when they change an .env var (that's the case with webpack, nodemon, and any other common tool that provide server auto restart)

Thus, I came with this acceptable package.json

    "uncache": "shx rm -rf .parcel-cache",
    "compile": "parcel build src/index.html --cache-dir .parcel-cache",
    "build": "npm run uncache && npm run compile",
    "uncache:dev": "shx rm -rf .parcel-dev-cache",
    "serve": "parcel src/index.dev.html --cache-dir .parcel-dev-cache",
    "dev": "npm run uncache:dev && npm run serve",

Which provides :

• in production, cache cleanup before each build (which is anyway the thing to do for safety, I guess, to make you build future-proof of this kind of bug)
• in dev, hot reload with rebuild-from-cache when editing sources, but cache-cleanup between each dev server cold start

The only limitations are :

• you have to cold restart manually the server (killing the process) when you have to change an environment variable (which anyway everyone is used to)
• you don't have benefit from cache when cold-restarting the server in dev

---

⚠️ Though, there is still a bug. The fact I have to manually erase the cache before a cold start should not happen, and as @DeMoorJasper said

DeMoorJasper commented on 11 Jul 2018
We should probably add the env variables to the cache key

[cyrilchapon]

I may take an hour to contribute on this, @DeMoorJasper @mischnic can you point me to the right direction to "add that environment change to the cache key ?"

EDIT: I found this old issue #66, resolved with this PR #521, merged in this commit #6c3d34f, and integrated inside 1.5.0

This seems like a regression then ?

[mischnic]

EDIT: I found this old issue #66
This seems like a regression then ?

Yes, this function should make caching work properly for env variables:
https://github.com/parcel-bundler/parcel/blob/30624f75b7421c0627202e459240d68e1b50bbbb/packages/core/parcel-bundler/src/utils/isAccessedVarChanged.js#L4-L12

[mischnic]

Both examples from this comment https://github.com/parcel-bundler/parcel/issues/1625#issuecomment-470002629 works for me.
Which version of Parcel are you using? Could you try it with the current master?

[cyrilchapon]

That's curious

"parcel-bundler": "^1.11.0"

I'll try and come back

[cyrilchapon]

Well I'm back

Could you try it with the current master?

Nope I can't. That's what happen when a repo is only-yarn-not-npm compatible.

Just

git clone [stuff] && cd parcel
npm install

doesn't work

git clone [stuff] && cd parcel
yarn install
cd packages/core/parcel-bundler
npm link

Doesn't work

EDIT:

Ok after loosing half an hour and reading CONTRIBUTING.md, I managed to install it locally.

I confirm it's not working in here.

Any change in environment variable (not followed by a source-code change) is not reflected inside the next build, unless cache is cleared in-between

[ChristophP]

Any updates on this? I am experiencing the same behavior.

echo "FOO=bar" > .env
echo "<script>console.log(process.env.FOO)</script>" > index.html
npx parcel index.html # results in <script>console.log("bar")</script>

echo "FOO=BAR" > .env
npx parcel index.html # still results in <script>console.log("bar")</script> and not "BAR"

restarting parcel does NOT reflect any new changes.
clearing the cache makes it work, but that is annoying to do.

[muratg]

@ChristophP the only other "workaround" I found was using --no-cache. Still fast enough in most cases, but for my current project, I just went with create-react-app/webpack. I may give Parcel a try again once this is fixed because I don't enjoy webpack configuration at all.

[ChristophP]

@muratg yeah, the env thing was not a deal breaker for me but I just ran into another issue about broken source maps in Chrome which I think is. I also wanna use parcel so bad because I don't want to have to deal with webpack again. Desperately waiting for parcel 2 to get out of alpha :-)

[cmditch]

Experiencing the same error as you @cyrilchapon. I'll change a value in .env, run parcel build ..., and the new value shows up nowhere. Deleting the cache is the only fix.

(@ChristophP also experiencing issues with source maps in Chrome as well)

[abellion]

Bot : I didn't try on V2, this might not be resolved.

[ajm113]

Same issue for me. Annoying since I have to basically nuke my .cache folder every time (just to be safe) to deploy to 3-4 different sites just because env variables don't properly update when even running parcel build for each site running on ver 1.12.4 in my package.

[alex-klock]

In case its help to anyone having similar issues, we had to update our babel.config and specifically tell transform-inline-environment-variables to exclude which env vars we didn't want to be inlined (and therefor cached).

  plugins: [
    ['transform-inline-environment-variables', {
      'exclude': ['VARIABLE_ONE', 'VARIABLE_TWO'],
    }],
  ]

[ajm113]

@alex-klock Thanks for the tip! :) I tried it so far it actually seems to be working. Still need to do a little bit more tests, but so far it seems to correct the issue.