安装React Navigation后遇react/jsx-runtime.jsx未定义错误求助

可能的原因及解决方案 #

1. 检查React版本兼容性 #

这个报错大多是因为React版本过低，不支持react/jsx-runtime的自动导入特性——React 17及以上版本才默认启用JSX自动转换，无需手动导入jsx-runtime。

• 查看当前React版本：执行 npm list react 或 yarn list react
• 若版本低于17，升级React：

  # 升级到React 17稳定版
  yarn add react@^17.0.0 react-dom@^17.0.0
  # 或升级到React 18稳定版
  yarn add react@^18.2.0 react-dom@^18.2.0
  

2. 检查Babel配置（自定义配置场景） #

如果项目有自定义Babel配置文件（babel.config.js或.babelrc），需确保配置了正确的JSX转换规则：

• 针对React 17+，使用@babel/preset-react并开启runtime: 'automatic'：

  module.exports = {
    presets: [
      'module:metro-react-native-babel-preset',
      ['@babel/preset-react', { runtime: 'automatic' }]
    ]
  };
  

3. 确保react-navigation包版本兼容 #

react-navigation各子包版本不匹配也会引发异常，建议重新安装兼容版本（以React Navigation 6为例，适配React 17/18）：

yarn add @react-navigation/native@^6.0.0
yarn add @react-navigation/bottom-tabs@^6.0.0
yarn add react-native-screens react-native-safe-area-context

4. 清除缓存并重启服务 #

缓存问题可能导致异常残留，执行以下步骤：

• 停止当前Metro服务
• 清除Metro缓存：yarn start --reset-cache
• 重新启动项目：yarn android 或 yarn ios

5. 检查JSX语法正确性 #

确认组件的JSX语法无错误：

• 所有标签是否正确闭合（比如你的代码中<Navigation/>写法正确）
• 函数组件是否正确返回JSX元素

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