Vue项目嵌入React组件使用React Hooks触发无效调用错误

核心解决方案 #

1. 消除多份React实例

• 确保Vue项目根目录与react-migration子目录的react、react-dom版本完全一致。
• 删除react-migration目录下的node_modules，让子项目复用根项目的依赖；或者在react-migration/package.json中把react、react-dom声明为peerDependencies，避免重复安装：

  "peerDependencies": {
    "react": "^18.x.x",
    "react-dom": "^18.x.x"
  }
  

2. 强制Webpack使用单份React

在Vue项目根目录的vue.config.js中添加模块解析别名，强制所有代码使用根目录的React实例：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'react': path.resolve(__dirname, 'node_modules/react'),
        'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
      }
    }
  }
}

3. 简化组件导入逻辑

避免通过Vue的computed属性传递React组件，直接在ReactWrapper.vue中导入目标组件，减少上下文传递可能带来的问题：

// ReactWrapper.vue
import UserAnalytics from "../react-migration/src/components/user-analytics/UserAnalytics";

// 修改updateReactComponent方法
methods: {
  updateReactComponent() {
    this.reactRoot.render(createElement(UserAnalytics, this.$attrs));
  },
}

问题根源 #

这个错误的本质是React存在多份独立实例，或者react与react-dom版本不匹配。React Hooks依赖内部的上下文调度器，当组件使用的React实例和渲染器（ReactDOM）使用的实例不一致时，调度器会返回null，导致Hooks调用失败，触发Invalid hook call警告。

验证方法 #

在React组件和ReactWrapper.vue中分别打印React的引用地址，判断是否存在多份实例：

// 在React组件中
console.log('React in component:', React);
// 在ReactWrapper.vue中
console.log('React in wrapper:', require('react'));

如果两个输出的引用地址不同，说明存在多份React实例，需要按上述方案修复。

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