React+Vite+Relay项目报错：Uncaught ReferenceError: require is not defined

错误信息 #

main.jsx:3 Uncaught ReferenceError: require is not defined
    at main.jsx:3:11

对应的main.jsx代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

当前vite.config.js配置 #

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
import babel from 'vite-plugin-babel';
import relay from "vite-plugin-relay";

export default defineConfig({
  plugins: [
    relay,
    react(),
    babel({
      babelConfig: {
        babelrc: false,
        configFile: false,
        plugins: [
          "babel-plugin-syntax-hermes-parser",
          "@babel/plugin-transform-flow-strip-types"
        ],
        parserOpts: { flow: "all" },
        presets: [
          "@babel/preset-env", 
          "@babel/preset-react",
          "@babel/preset-flow"
        ],
      },
    }),
  ],
})

package.json内容 #

{
  "name": "...",
  "packageManager": "yarn@4.2.2",
  "type": "module",
  "scripts": {
    "dev": "cross-env NODE_ENV=development vite ",
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.6",
    "@babel/preset-flow": "^7.24.6",
    "@babel/preset-react": "^7.24.6",
    "@emotion/react": "^11.11.4",
    "@vitejs/plugin-react": "^4.3.0",
    "babel-plugin-relay": "^16.2.0",
    "babel-plugin-syntax-hermes-parser": "^0.21.1",
    "cross-env": "^7.0.3",
    "eslint": "^9.3.0",
    "eslint-plugin-ft-flow": "^3.0.9",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "flow-bin": "^0.236.0",
    "flow-remove-types": "^2.236.0",
    "flow-typed": "^4.0.0",
    "get-graphql-schema": "^2.1.2",
    "graphql": "^16.8.1",
    "hermes-eslint": "^0.21.1",
    "relay-compiler": "^16.2.0",
    "relay-devtools": "^1.4.0",
    "relay-hooks": "^9.0.0",
    "vite": "^5.2.11",
    "vite-plugin-babel": "^1.2.0",
    "vite-plugin-relay": "^2.1.0"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/styles": "^4.11.5",
    "chart.js": "^4.4.3",
    "formik": "^2.4.6",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "react": "^18.3.1",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-feather": "^2.0.10",
    "react-google-login": "^5.2.2",
    "react-helmet": "^6.1.0",
    "react-perfect-scrollbar": "^1.5.8",
    "react-relay": "^16.2.0",
    "react-router-dom": "^6.23.1",
    "react-scripts": "^5.0.1",
    "uuid": "^9.0.1",
    "yup": "^1.4.0"
  }
}

排查建议 #

• 定位require来源：浏览器报错指向main.jsx第3行，但你贴的源码是ES模块的import语法，说明编译后的代码出现了未被转换的require。检查App.jsx及其依赖的所有文件，确认是否有使用CommonJS的require语法，因为你的项目设置了"type": "module"，Vite默认处理ES模块，未转换的require会在浏览器报错。
• 合并Babel配置，移除冲突插件：@vitejs/plugin-react本身已经集成了Babel处理，额外添加的vite-plugin-babel可能导致配置冲突。尝试移除vite-plugin-babel，将Flow和Relay的Babel配置合并到@vitejs/plugin-react的babel选项中，示例配置如下：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react';
  import relay from "vite-plugin-relay";
  
  export default defineConfig({
    plugins: [
      relay,
      react({
        babel: {
          babelrc: false,
          configFile: false,
          plugins: [
            "babel-plugin-syntax-hermes-parser",
            "@babel/plugin-transform-flow-strip-types",
            "babel-plugin-relay"
          ],
          parserOpts: { flow: "all" },
          presets: [
            "@babel/preset-env", 
            "@babel/preset-react",
            "@babel/preset-flow"
          ],
        }
      }),
    ],
  })
  

• 清理冲突依赖：你的package.json中同时存在react-scripts和Vite，这两个是完全不兼容的构建工具，react-scripts属于Create React App生态，直接删除react-scripts依赖，避免其配置干扰Vite的构建流程。
• 验证Relay编译结果：确保relay-compiler已正确生成GraphQL对应的Relay artifacts，运行relay-compiler命令查看输出是否有报错，若生成的文件存在问题，可能会引入错误的模块语法。
• 检查第三方依赖的模块格式：部分老旧第三方库可能仍使用CommonJS编写，Vite默认会转换，但如果出现异常，可在vite.config.js中通过optimizeDeps.include指定需要预构建的依赖，或者用ssr.noExternal强制转换。重点排查react-google-login、react-helmet这类可能存在模块格式问题的依赖。

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