DEV Community

How to use process.env in Vite

whchi on April 06, 2023

The process object is a global object that is exclusive to the Node.js environment, and therefore cannot be accessed in a browser environment. Ho...
Collapse
 
troymorvant profile image
Troy Morvant • Edited

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.

Collapse
 
whchi profile image
whchi

I completely understand your frustration when encountering this issue, it took me a long time to figure it out

Collapse
 
alais29dev profile image
Alfonsina Lizardo

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

Collapse
 
whchi profile image
whchi

I didn't noticed that, thank you!

Collapse
 
maarlon1 profile image
Maarlon1 • Edited

This doesnt work inside script in index.html

Collapse
 
whchi profile image
whchi

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

Collapse
 
smyja profile image
Smyja

when you add the built files as a script in a html file it still doesn't recognise the environment as production.

Collapse
 
ayoubbousetta profile image
AYOUB BOUSETTA

what's the different between this and import.meta if both end up exposing the Values in the build ?

Collapse
 
whchi profile image
whchi • Edited

If you can make both exposed as value after build, then there would be no difference.

Collapse
 
anishsomeashwara profile image
Anish-Someashwara

How to prevent exposing the keys in build ?
Anyone have any idea ?

Collapse
 
leopetrucci profile image
Leonardo Petrucci

This works in dev, but process remains undefined once built. How did you get around that?

Collapse
 
whchi profile image
whchi

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 loadEnv function as the third parameter

const env = loadEnv(mode, process.cwd(), 'YOUR_PREFIX_')
Enter fullscreen mode Exit fullscreen mode

it how VITE_* works

Collapse
 
leopetrucci profile image
Leonardo Petrucci

Sorry I should've edited my comment. Vite doesn't have access to process.env in production, but instances of process.env.[variable] are correctly replaced on build by assigning them in the config.

Collapse
 
hridaymardam profile image
Dheeraj Awale

Can this work with azure app settings as well?

Collapse
 
pagarevijayy profile image
Vijay Pagare

👏 good one. thanks, helped!