React报错：Hooks只能在函数组件内调用的多实例问题求助

问题详情 #

• 涉及三个项目：CORE、COMPONENTS、BUILDER
• 项目间通过本地文件链接关联：
  • CORE在COMPONENTS的package.json中配置："core": "file:../path-to-core-project"
  • COMPONENTS在BUILDER的package.json中配置："components": "file:../path-to-components-project"
• CORE导出的DataContextProvider组件同时被COMPONENTS和BUILDER引用，代码如下：

  const DataContextProvider = ({ children, configuration }) => {
    return (
      <ClientContext.Provider value={client}>
        <DataContext.Provider value={someValue}>
          {children}
        </DataContext.Provider>
      </ClientContext.Provider>
    );
  }
  

• 触发报错：

  react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. React与渲染器（如React DOM）版本不匹配
  2. 违反Hook使用规则
  3. 应用中存在多个React副本
     at exports.DataContextProvider (http://localhost:3000/static/js/bundle.js:542265:11)

• 前置尝试：三个项目均使用React 18.2.0，曾通过yarn link关联COMPONENTS和BUILDER的React，但问题未解决。

可行解决方案 #

方案1：使用Yarn/NPM Workspaces统一依赖 #

本地file:链接会让每个项目单独安装React，即使版本相同也会被识别为不同实例，Workspaces能将依赖统一提升到根目录，确保全局只有一个React副本：

1. 在三个项目的共同上级目录创建package.json：

   {
     "private": true,
     "workspaces": [
       "./CORE",
       "./COMPONENTS",
       "./BUILDER"
     ]
   }
   

2. 删除每个项目下的node_modules和锁文件（yarn.lock或package-lock.json）
3. 在上级目录执行yarn install（Yarn用户）或npm install（npm用户），所有项目会共享根目录的React依赖。

方案2：手动指定React依赖路径 #

若不想使用Workspaces，可在COMPONENTS和BUILDER的package.json中，强制React依赖指向CORE的本地副本：

"dependencies": {
  "react": "file:../CORE/node_modules/react",
  "react-dom": "file:../CORE/node_modules/react-dom"
}

修改后删除这两个项目的node_modules，重新执行依赖安装命令。

方案3：排查Hook使用规则 #

除了多实例问题，也需确认代码是否违反Hook规则：

• 确保所有Hook调用都在函数组件的顶层，避免在条件判断、循环、嵌套函数内调用
• 检查ClientContext和DataContext是否在组件外部创建，避免每次渲染重复生成新的Context实例

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