【React×Vite】`Uncaught ReferenceError: global is not defined`に対応する

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

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

https://almonta2021blog.com/react-vite-global-error/

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

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr(),
    tsconfigPaths(),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
  },
+  define: {
+    global: 'window',
+  }
})