使用Vite构建React+GraphQL应用时出现无法解析'./globalThis.js'错误

问题分析 #

出现这个错误是因为部分依赖（大概率是GraphQL相关包）在运行时尝试访问Node.js的global全局变量，而你配置的define: { global: "globalThis" }在代码替换过程中，导致某些逻辑错误地将globalThis解析为相对路径文件./globalThis.js，但该文件实际不存在。

解决方案 #

方案1：升级GraphQL及相关依赖 #

很多旧版本的GraphQL客户端或工具库存在浏览器环境下的全局变量兼容问题，升级到最新稳定版大概率能解决问题：

npm update graphql @apollo/client # 若使用其他GraphQL工具包，替换为你实际依赖的包名

方案2：调整Vite配置，添加全局变量polyfill #

如果升级依赖无效，修改vite.config.js，通过插件为浏览器环境polyfill Node.js全局变量：
首先安装所需插件：

npm install @esbuild-plugins/node-globals-polyfill -D

然后修改配置文件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          global: true,
          process: true,
          buffer: true
        })
      ]
    }
  },
  // 移除原来的define.global配置，改用polyfill插件处理全局变量
  define: {
    // 若有其他需要定义的变量可保留，否则可删除该块
    // 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})

方案3：用Rollup注入插件指定全局变量映射 #

如果前两种方案无效，尝试用@rollup/plugin-inject手动将global指向globalThis：
安装插件：

npm install @rollup/plugin-inject -D

修改Vite配置：

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

export default defineConfig({
  plugins: [
    react(),
    inject({
      global: ['globalThis', ''] // 将代码中的global映射到globalThis
    })
  ]
})

内容的提问来源于stack exchange，提问作者Tanvir Ahammed