How do add process.env when using vite? - reactjs

Question

I got a react project I'm building with vite.
This project uses #mui and inside it, they have -
if (typeof process !== 'undefined' && process.env.GRID_EXPERIMENTAL_ENABLED !== undefined && localStorageAvailable() && window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED')) {
experimentalEnabled = window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED') === 'true';
} else if (typeof process !== 'undefined') {
experimentalEnabled = process.env.GRID_EXPERIMENTAL_ENABLED === 'true';
}
When they try and access process.env.GRID_EXPERIMENTAL_ENABLED, it fails, saying it can't get GRID_EXPERIMENTAL_ENABLED of undefined.
I logged process, and it's an empty object.
I tried different ways of generating a process env through the vite.config.ts file, but nothing worked.
Expected result - 3rd party libs should be able to access process.env

Answer 1

Insite the Vite environment
Vite exposes env variables on the special import.meta.env object.
So instead of
process.env.GRID_EXPERIMENTAL_ENABLED
Do
import.meta.env.GRID_EXPERIMENTAL_ENABLED
If the variables still don't show up, its because vite only exposes variables starting with the VITE_ keyword.
So try
import.meta.env.VITE_GRID_EXPERIMENTAL_ENABLED
And in you .env file
VITE_GRID_EXPERIMENTAL_ENABLED=true
Outside the Vite environment
If you are trying to access .env variables outside Vite then you have to expose them first.
// vite.config.(ts/js)
import { defineConfig, loadEnv } from 'vite';
export default ({ mode }) => {
// Load app-level env vars to node-level env vars.
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
return defineConfig({
// You can now use process.env.GRID_EXPERIMENTAL_ENABLED
});
}