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!