React项目启动报错：疑似重复安装React实例问题求助

启动开发服务器时出现报错，报错截图如下：

以下是除BrowserRouter外唯一使用的组件代码：

import React, { useState } from "react";
import { useNavigate } from "react-router";

require("react-dom");
window.React2 = require("react");
console.log(window.React1 === window.React2);

export default function SignUp() {
    const [form, setForm] = useState({
        username: "",
        password: "",
        email: "",
        phone: ""
    })
    const navigate = useNavigate()

    function updateForm(value) {
        return setForm((prev) => {
            return {...prev, ...value}
        })
    }

    async function onSubmit(e) {
        e.preventDefault();

        const newUser = {...form}

        await fetch("http://localhost:5000/account/add", {
            method: "POST",
            headers: {
                "Content-Type":"application/json",
            },
            body: JSON.stringify(newUser)
        })
        .catch(error => {
            window.alert(error);
            return;
        })

        /*
        setForm({
            username: "",
            password: "",
            email: "",
            phone: ""
        })
        */
       
        navigate("/")
    }
    return (
    <div>
     <h3>Sign In</h3>
     <form onSubmit={onSubmit}>
       <div className="form-group">
         <label htmlFor="name">Username</label>
         <input
           type="text"
           className="form-control"
           id="name"
           value={form.name}
           onChange={(e) => updateForm({ username: e.target.value })}
         />
       </div>
       <div className="form-group">
         <label htmlFor="position">email</label>
         <input
           type="text"
           className="form-control"
           id="position"
           value={form.position}
           onChange={(e) => updateForm({ email: e.target.value })}
         />
       </div>
       <div className="form-group">
         <label htmlFor="name">Phone Number</label>
         <input
           type="text"
           className="form-control"
           id="name"
           value={form.name}
           onChange={(e) => updateForm({ phone: e.target.value })}
         />
        </div>
        <div className="form-group">
         <label htmlFor="name">Password</label>
         <input
           type="text"
           className="form-control"
           id="name"
           value={form.name}
           onChange={(e) => updateForm({ password: e.target.value })}
         />
        </div>
       <div className="form-group">
         <input
           type="submit"
           value="Sign Up"
           className="btn btn-primary"
         />
       </div>
     </form>
   </div>
    )
}

按照React文档建议，我在index.js中挂载了window.React1 = require("react")，在组件中挂载window.React2 = require("react")，打印结果为false，说明存在多个React实例，这应该是报错的核心原因。

项目的package.json配置如下：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方法 #

1. 清理并重装依赖
   删除本地依赖文件与缓存，重新安装：

   rm -rf node_modules package-lock.json
   npm cache clean --force
   npm install
   

2. 检查重复React依赖
   运行命令查看依赖树，确认是否有嵌套安装的React：

   npm ls react
   

   如果发现某个依赖自带React，可通过npm dedupe命令合并重复依赖，或手动排查该依赖版本是否兼容当前React版本。
3. 移除测试代码
   删除组件中用于检测的require("react-dom"); window.React2 = require("react");代码，避免import与require混用导致的模块加载异常。
4. 修复组件表单绑定错误
   组件中存在多处表单值绑定错误，比如用户名输入框的value绑定了form.name，但实际应绑定form.username；邮箱输入框绑定了form.position，实际应绑定form.email，这些错误会导致表单值无法正常更新，需逐一修正。

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