Dans un scénario où vous exécutez une application vite avec le modèle Reactjs pour un projet et essayez de récupérer la variable d'environnement à partir du fichier .env. Comme le moyen le plus courant de récupérer les variables d'environnement à partir de .env consiste à utiliser process.env.SOMETHING pour la variable comme :

SOMETHING=SECRETSAUCE

À ce stade, le vite.config.ts ressemblerait à :

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

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

Mais la récupération de variable ne fonctionne pas immédiatement dans vite, et il existe de nombreuses façons de résoudre le problème. J'ai essayé la plupart d'entre eux et j'ai eu envie de m'en tenir à la méthode simple et directe.

Probablement avec la définition ci-dessus et la logique de récupération par défaut avec process.env.*, vous auriez obtenu l'erreur Uncaught ReferenceError : global n'est pas défini.

Je trouve beaucoup de références dans stackoverflow et je suis confus.

Le correctif de l'erreur consiste à définir global dans la configuration comme ci-dessous.

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

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

Maintenant, cela conduirait probablement à une autre erreur plus courante Uncaught ReferenceError : le processus n'est pas défini.

Encore une fois, il existe de nombreuses solutions sur le Web et certaines sont obsolètes. Je trouve que le plus pertinent et le plus facile à mettre en œuvre consiste à importer loadEnv à partir de la bibliothèque vite et à créer la logique personnalisée comme ci-dessous.

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

Et la magie opère tout de suite !!

Il faut également mentionner que nous n'avons pas besoin d'utiliser la dépendance dotenv car la récupération des variables d'environnement dans le code avec process.env.* fonctionne bien sans elle.

Bon codage !