Fixing vite error for reactjs - global is not defined and process is not defined

In a scenario where you are running a vite app with reactjs template for a project and trying to fetch the environment variable from .env file. As the popular way to fetch the environment variables from .env is to use process.env.SOMETHING for the variable as:

SOMETHING=SECRETSAUCE 

At this point the vite.config.ts would look like:

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) 

But fetching variable does not work right away in vite, and there are lots of way to solve the issue. I tried most of them and I felt to stick to the simple and straight forward way.

Probably with above definition and default fetching logic with process.env.*, you would have got error Uncaught ReferenceError: global is not defined.

I find lots of references in stackoverflow and I get confused.

The fix for error is to define global in the config as below.

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], define: { global: {}, }, }) 

Now, this would probably lead to another more common error Uncaught ReferenceError: process is not defined.

Again, there are many solutions on web and some are outdated. I find the most relevant and easy to implement is to import loadEnv from vite library and build the custom logic as below.

import { defineConfig, loadEnv } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { define: { global: {}, 'process.env': env }, plugins: [react()], } }) 

And the magic happens right away!!

Also to mention, we need not use the dotenv dependency as environment variable fetching in code with process.env.* works well without it.

Happy coding!