"Uncaught ReferenceError: global is not defined"に対応する

React×Viteで開発中に出たエラーの対応をまとめる。

エラー内容

React×Viteで開発していて、aws-sdkライブラリを入れたらというエラーが出て画面が正常にレンダリングされなくなった。

対応策

このエラーは、JavaScriptのグローバルオブジェクトにアクセスしようとしたが、定義されていないといった時に発生します。 JavaScriptのグローバルオブジェクトは、ブラウザ上とNode.js上では異なり、ブラウザ上では”window”、Node.js上では”global”がそれにあたります。

出典：

=> 【React × Vite】Uncaught ReferenceError: global is not defined | Almonta Blog

vite.config.tsにglobal ⇆ window間の互換を定義することで解決。

vite.config.ts
1/// <reference types="vitest" />
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4import svgr from 'vite-plugin-svgr'
5import tsconfigPaths from 'vite-tsconfig-paths';
6
7// https://vitejs.dev/config/
8export default defineConfig({
9  plugins: [
10    react(),
11    svgr(),
12    tsconfigPaths(),
13  ],
14  test: {
15    globals: true,
16    environment: 'jsdom',
17    setupFiles: ['./vitest.setup.ts'],
18  },
19 define: {
20   global: 'window',
21 }
22})
23
24