4

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.

Improve this question

4 Answers 4

Reset to default
8

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

UPDATE: Sometimes you have to run the command more than once in order to clear all the cached env
I'm running with bun, but actually running printenv in terminal will give a clue why my .env is not updating the env variable, then to make my dev server updated I just restarted my terminal session (this should clear all the env in the session)
1

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

Improve this answer

Comments

0

Okay, so I have found a way to seemingly solve this: nuking /node_modules and reinstalling the project seems to get rid of this.

Improve this answer

2 Comments

This deosn't work
Same, does not work
0

To anyone struggling with this, I want to put what my problem & solution was, as this thread was one of my attempts to fix it, and another.

What I tried:

  1. The above answers
  2. Another possible solution

My issue

It turned out to be the $ character in the .env variable. It loads fine in a standard Node.js app, but for my Vue + Vite configuration, it would always load the var as undefined.

My fix

Escaping the \ character in the .env . For example, if the .env variable is $foo$bar, you escape it via \\$foo\\$bar, which will then be loaded as -> $foo$bar

.env file originally:

TOKEN=$9aix$idaH$aa

.env file escaped:

TOKEN=\$9aix\$idaH\$aa

For what it's worth, I am on Windows.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.