Correction de l'erreur vite pour reactjs - global n'est pas défini et le processus n'est pas défini

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 est d'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 variables ne fonctionne pas immédiatement en 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 senti que je devais 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 est d'importer loadEnv à partir de la bibliothèque vite et de 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 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!