React Native Web应用在Electron中运行报Invalid hook call错误求助

问题根因 #

你遇到的错误本质是只有Electron环境下才触发了多React副本加载或React上下文隔离的问题，和Hooks调用规则本身无关，以下是具体原因和解决方案：

1. 最可能诱因：多份React实例被同时加载 #

纯RNW环境运行时依赖树扁平化，所有组件共享同一份React实例，但Electron构建流程很容易出现重复加载：

• 你的构建工具（Webpack/Vite）配置不当，导致react-redux、PersistGate、ConnectedRouter等第三方包导入了自己依赖子目录下的React副本，而你自己写的基础组件用的是根目录的React实例
• 如果你给Electron渲染进程构建时配置了externals把React标记为外部依赖，Electron会同时加载你构建产物外的node_modules里的React，和构建产物内打包的React，出现两份实例
• 简化版写法只用到了RNW内置的View、Text组件，全程用同一份React实例，所以不会报错。

验证方法

在App.js入口和react-redux的Provider组件源码中分别加入console.log(React)，如果打印的两个引用地址不一致，即可确认是多副本问题。

2. 次要诱因：Electron上下文隔离配置冲突 #

Electron 12+版本默认开启contextIsolation，会把预加载脚本上下文和页面上下文隔离开：

• 若你的RNW代码部分逻辑在预加载脚本中执行，部分在页面上下文执行，二者的React实例分属不同隔离域，第三方包调用Hooks时就会触发错误
• 简化版写法没有跨上下文调用的第三方组件，所以运行正常。

3. 排查解决方案 #

• 优先锁定React依赖路径：给构建工具配置别名，强制所有包统一导入根目录的React实例，以Webpack为例：

const path = require('path')
module.exports = {
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
      'react-native$': 'react-native-web'
    }
  }
}

• 调整Electron窗口配置：如果不需要强安全隔离，可临时关闭上下文隔离验证问题：

new BrowserWindow({
  webPreferences: {
    contextIsolation: false,
    nodeIntegration: true
  }
})

• 排查依赖版本冲突：执行npm ls react或yarn why react检查是否安装了多个版本的React，统一所有peer依赖的React版本号即可。

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