The process object is a global object that is exclusive to the Node.js environment, and therefore cannot be accessed in a browser environment.
However, bundlers like webpack and vite can handle this limitation by processing the custom process variable before rendering it for browser use.
To achieve this, vite uses 2 libraries:
- vite-plugin-env-compatible: load env file
- @rollup/plugin-replace: replace javascript variables into env file's variables
The official documentation states that all VITE_* environment variables set in the .env file can be accessed through import.meta.env.*, e.g: VITE_MY_VAR="abc" can be use as import.meta.env.VITE_MY_VAR.
However, it's not recommended for users to define environment variables with the VITE_* prefix when developing packages.
To enable greater flexibility in usage, it's recommended to convert environment variables to the form of process.env.
The following example shows an actual implementation.
- .env
YOUR_STRING_VARIABLE="helloworld"
YOUR_BOOLEAN_VARIABLE=false
- vite.config.js
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
define: {
'process.env.YOUR_STRING_VARIABLE': JSON.stringify(env.YOUR_STRING_VARIABLE),
'process.env.YOUR_BOOLEAN_VARIABLE': env.YOUR_BOOLEAN_VARIABLE,
// If you want to exposes all env variables, which is not recommended
// 'process.env': env
},
};
});
then you can use process.env.YOUR_ENV in anywhere of your project.
Top comments (14)
I was running into this issue with a new project using vite as the bundler for a component library that referenced env variables inside the fetchers. This was SOOO frustrating as I kept referring to the documentation and everything was setup correctly. The only way I was able to get it to work (prior to finding this article) was to change the library to look for the values in
process.env.*** || import.meta.**(with import.meta being last in the list) but I didn't understand why this should matter. I think at the very least, Vite could updated their documentation for this use case as following their docs actually breaks things. Thank you for this post as now I have more clarity into why this problem exists and why the hack I used worked at all.I completely understand your frustration when encountering this issue, it took me a long time to figure it out
Thanks! I was having the same issue and was able to solve it with this. Also, in your vite.config.js code there's an extra ')' at the end of the first line in the define object
I didn't noticed that, thank you!
what's the different between this and import.meta if both end up exposing the Values in the build ?
If you can make both exposed as value after build, then there would be no difference.
How to prevent exposing the keys in build ?
Anyone have any idea ?
This works in dev, but
processremains undefined once built. How did you get around that?My usage is for SDK development, so it won't be built,f you want your environment variable to show up after it's built, pass your prefix into the
loadEnvfunction as the third parameterit how
VITE_*worksSorry I should've edited my comment. Vite doesn't have access to
process.envin production, but instances ofprocess.env.[variable]are correctly replaced on build by assigning them in the config.This doesnt work inside script in index.html
Could you please provide more context or clarify what you need assistance with regarding your situation or code? Just let me know the details, and I'll try to solve your problem
when you add the built files as a script in a html file it still doesn't recognise the environment as production.
👏 good one. thanks, helped!