main.jsx:3 Uncaught ReferenceError: require 未定义 - React + Vite + Relay

Question

我在尝试让我的 React 应用程序与 Vite 一起工作时遇到以下错误。它还使用 Relay 和 React（和 Flow）

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

所指的代码如下

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
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"
        ],
      },
    }),
  ],
})

理解我何时改变某件事，无论是向前迈出一步还是后退一步，都是一个挑战，因此任何关于如何改进我的方法的建议都将非常有益。

代码库当前正在使用 Relay 和 Flow，因此轻松摆脱这些 atm 是不可行的。

这是我的

package.json

{
  "name": "...",
  "packageManager": "[email protected]",
  "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"
  }
}

如果有其他有价值的细节可以更新，请告诉我

Answer 1

中继配置需要设置为使用模块而不是commonjs。

添加

“eagerEsModules”：true

到relay.config.json

...使用vite，它似乎不适用于我的relay.config.js，所以我必须将其制作为json文件，然后在package.json中使用脚本来指定使用中继配置的位置运行中继编译器

relay.config.json 应该类似于： { "src": "./src", “语言”：“javascript”， “模式”：“./schema.graphql”， “eagerEsModules”：正确， “排除”： [ “/node_modules/”， “/模拟/”， “/生成/” ] }