En un escenario en el que está ejecutando una aplicación vite con una plantilla de reactjs para un proyecto e intenta recuperar la variable de entorno del archivo .env. La forma popular de recuperar las variables de entorno de .env es usar Process.env.SOMETHING para la variable como:

SOMETHING=SECRETSAUCE

En este punto, vite.config.ts se vería así:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Pero la recuperación de variables no funciona de inmediato en la invitación y hay muchas formas de resolver el problema. Probé la mayoría de ellos y sentí que debía ceñirme a la forma sencilla y directa.

Probablemente con la definición anterior y la lógica de recuperación predeterminada con Process.env.*, habría obtenido el error Uncaught ReferenceError: global no está definido.

Encuentro muchas referencias en stackoverflow y me confundo.

La solución al error es definir global en la configuración como se muestra a continuación.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

Ahora, esto probablemente conduciría a otro error más común: Error de referencia no detectado: el proceso no está definido.

Nuevamente, hay muchas soluciones en la web y algunas están desactualizadas. Creo que lo más relevante y fácil de implementar es importar loadEnv desde la biblioteca vite y crear la lógica personalizada como se muestra a continuación.

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()],
  }
})

¡¡Y la magia ocurre de inmediato!!

Además, no necesitamos usar la dependencia dotenv como variable de entorno que se obtiene en el código con process.env.* funciona bien sin él.

¡Feliz codificación!