Reactjs の vite エラーを修正 - グローバルが定義されておらず、プロセスが定義されていません

DDD
リリース: 2024-09-19 00:57:32
オリジナル
223 人が閲覧しました

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

プロジェクトのreactjsテンプレートを使用してviteアプリを実行し、.envファイルから環境変数を取得しようとしているシナリオ。 .env から環境変数を取得する一般的な方法は、変数に process.env.SOMETHING を次のように使用することです。

SOMETHING=SECRETSAUCE
ログイン後にコピー

この時点で、vite.config.ts は次のようになります:

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

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

ログイン後にコピー

しかし、変数のフェッチは vite ではすぐには機能しません。問題を解決する方法はたくさんあります。それらのほとんどを試してみましたが、シンプルで単純な方法に固執する必要があると感じました。

おそらく、上記の定義と process.env.* によるデフォルトのフェッチ ロジックでは、「Uncaught ReferenceError: global is not generated.」というエラーが発生するでしょう。

stackoverflow でたくさんの参照を見つけて混乱してしまいます。

エラーを修正するには、以下のように構成でグローバルを定義します。

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

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

ログイン後にコピー

これはおそらく、別のより一般的なエラー「Uncaught ReferenceError: process is not generated.」につながる可能性があります。

繰り返しますが、ウェブ上には多くのソリューションがあり、中には古いものもあります。最も適切で実装が簡単なのは、vite ライブラリからloadEnvをインポートし、以下のようにカスタム ロジックを構築することだと思います。

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

ログイン後にコピー

そして魔法はすぐに起こります!!

また、dotenv 依存関係を使用する必要はありません。process.env.* を使用したコードでの環境変数の取得は、dotenv 依存関係がなくても正常に機能するためです。

コーディングを楽しんでください!

以上がReactjs の vite エラーを修正 - グローバルが定義されておらず、プロセスが定義されていませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!