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

プロジェクトの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 サイトの他の関連記事を参照してください。