Expo管理式React Native项目Web端启动报错求助

排查方向及解决方案 #

1. 修复Expo Web依赖配置 #

Expo Web需确保react-dom和@expo/webpack-config适配当前项目版本，执行以下命令重新安装并缓存清理：

expo install react-dom @expo/webpack-config
expo r -c

完成后重启项目，再尝试打开Web端。

2. 检查Hook使用规范 #

Invalid Hook Call最常见原因是Hook调用不符合规则，需确保useState等Hook仅在函数组件顶层调用，禁止在条件判断、循环、嵌套函数内使用。

正确示例：

import { useState } from 'react';
import { View, Text } from 'react-native';

export default function App() {
  // 仅在组件顶层调用Hook
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
    </View>
  );
}

3. 排查多React实例问题 #

即使版本匹配，重复安装依赖可能导致多React实例共存。执行命令查看依赖树：

npm ls react react-dom

若发现多个版本，删除依赖文件后重装：

rm -rf node_modules package-lock.json
npm install

4. 验证app.json的Web配置 #

确保app.json中包含正确的Web端配置：

{
  "expo": {
    "web": {
      "bundler": "webpack",
      "output": "static"
    }
  }
}

缺失则添加后重启项目。

5. 更新Expo CLI及依赖 #

旧版本Expo CLI可能存在Web端兼容性问题，执行更新命令：

npm install -g expo-cli
expo update

更新完成后重新启动测试。

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