Heim > Web-Frontend > js-Tutorial > Hauptteil

Behebung des Vite-Fehlers für ReactJS – Global ist nicht definiert und Prozess ist nicht definiert

DDD
Freigeben: 2024-09-19 00:57:32
Original
250 Leute haben es durchsucht

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

In einem Szenario, in dem Sie eine Vite-App mit einer ReactJS-Vorlage für ein Projekt ausführen und versuchen, die Umgebungsvariable aus der .env-Datei abzurufen. Die gängige Methode zum Abrufen der Umgebungsvariablen aus .env ist die Verwendung von „process.env.SOMETHING“ für die Variable als:

SOMETHING=SECRETSAUCE
Nach dem Login kopieren

Zu diesem Zeitpunkt würde die vite.config.ts so aussehen:

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

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

Nach dem Login kopieren

Aber das Abrufen von Variablen funktioniert in Vite nicht sofort und es gibt viele Möglichkeiten, das Problem zu lösen. Ich habe die meisten davon ausprobiert und hatte das Gefühl, dass ich bei der einfachen und unkomplizierten Methode bleiben möchte.

Wahrscheinlich hätten Sie mit der obigen Definition und der Standard-Abruflogik mit „process.env.*“ den Fehler „Uncaught ReferenceError: global is not Defined“ erhalten.

Ich finde viele Referenzen im Stackoverflow und bin verwirrt.

Die Fehlerbehebung besteht darin, global in der Konfiguration wie folgt zu definieren.

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

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

Nach dem Login kopieren

Dies würde wahrscheinlich zu einem weiteren, häufiger auftretenden Fehler führen. Uncaught ReferenceError: Prozess ist nicht definiert.

Auch hier gibt es viele Lösungen im Internet und einige sind veraltet. Meiner Meinung nach ist es am relevantesten und am einfachsten zu implementieren, LoadEnv aus der Vite-Bibliothek zu importieren und die benutzerdefinierte Logik wie folgt zu erstellen.

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

Nach dem Login kopieren

Und die Magie passiert sofort!!

Außerdem ist zu erwähnen, dass wir die dotenv-Abhängigkeit nicht verwenden müssen, da das Abrufen von Umgebungsvariablen im Code mit „process.env.*“ auch ohne sie gut funktioniert.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonBehebung des Vite-Fehlers für ReactJS – Global ist nicht definiert und Prozess ist nicht definiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage