【React × Vite】Uncaught ReferenceError: global is not defined

ReactとViteとFirebaseで構築したアプリで以下のエラーが発生したのでその解消方法をまとめました。

Uncaught ReferenceError: global is not defined

エラー原因

このエラーは、JavaScriptのグローバルオブジェクトにアクセスしようとしたが、定義されていないといった時に発生します。

JavaScriptのグローバルオブジェクトは、ブラウザ上とNode.js上では異なり、ブラウザ上では”window”、Node.js上では”global”がそれにあたります。

Viteはデフォルトではブラウザ上でJavaScriptを実行しますが、Node.js上でも実行することができ、その場合は”global”オブジェクトが定義されている必要があります。

つまり、Node.js上で実行しようとしたところ”global”オブジェクトがなかったというのがエラーの原因です。

解消法

“global”オブジェクトに空のオブジェクトを定義し、”global”変数にアクセスできるようにします。

記述方法は以下です。

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

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

以上、お読みいただきありがとうございます。