.env variables with Vite not changing in the browser

Question

I have a React app that I have migrated to Vite from CRA for bundling/serving. Since I am re-using the API wrapper that communicates with the backend in other projects, I made it a library distributed via npm. The backend URL should be configurable from the frontend using the library, so with CRA I defined it from a .env file and accessing them from within the library using process.env.REACT_APP*. Now with Vite, I am trying to achieve the same thing, so in my library (that bundles with rollup) I am letting the library consumer set the backend URL by reading `import.meta.env.VITE_`, which in the consuming React app is stored in a .env file.

In principle, this is working, but sometimes it seems that env variables are cached somewhere, because my changes to them in the .env file are not always reflected in the version served by `npm start`, and inconsistently so between browsers: for some hours Firefox was using a stale env value, then it suddenly worked, and now Chromium is behaving equally weird, although Firefox is working now. Neither re-starting the dev server nor my PC (!) seems to be working. I am completely lost as to why this is happening and why it is arbitrarily happening in different browsers at different times across re-boots.

Answer 1

In my case this is what was happening with react vite dev server.

I updated the env values and restarted the dev server but still the browser is seeing old value even in incognito or even clearing browser cache.

The way I resolved this is by manually clearing the env at system level.

1. Check from your terminal to see the values of the envs using printenv command. You should see all system env including VITE_
2. Delete all variable with VITE_ prefix using this command or any other method for var in ${(k)parameters}; do [[ $var == VITE_* ]] && unset $var; done 3.Restart vite dev server for your app

In a React app created with Vite, environment variables are typically loaded during the build process, and their values are embedded directly into the compiled JavaScript code. They are not stored as cache files that you can manually delete. So evene deleting node modules will not work as well

Answer 2

***** UPDATE #2 *****

So apparently, it seems like process.env had the variables after the build so I just ended up checking if it's PROD to use the process.env.VARIABLE_NAME, and if it's not PROD I use window.process.env.VARIABLE_NAME

---

***** UPDATE #1 *****

Seems like it's working only when running localhost. Still checking why it won't work after the build. Will update you when I manage to solve it.

---

For anyone who still faces this issue, I managed to solve it by installing vite-plugin.environment and importing it inside vite.config

import EnvironmentPlugin from 'vite-plugin-environment';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), EnvironmentPlugin('all', { prefix: 'VITE_' })],

  // ... rest of your configuration
})

Then within the consumed package built using rollup, I changed process.env.VARIABLE_NAME to window.process.env.VARIABLE_NAME.

It seems like it's working thanks to EnvironmentPlugin, which also injects the process.env inside window.