React.jsx类型无效错误排查：Expo Go运行App报错解决

问题场景 #

在VS Code中开发React项目，使用Expo Go扫码打开App后触发以下错误：

Warning: React.jsx: type is invalid -- expected a string but got: undefined

完整错误栈信息：

ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Layout`.

This error is located at:
    in Layout
    in Unknown (created by Route())
    in Route (created by Route())
    in LocationProvider (created by Route())
    in Route() (created by RootRoute)
    in RootRoute (created by ContextNavigator)
    in InitialRootStateProvider (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by NavigationContainer)
    in NavigationContainer (created by ContextNavigator)
    in RootRouteNodeProvider (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by ExpoRoot)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandler)
    in GestureHandler (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App) (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
 ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Layout`.

This error is located at:
    in Layout
    in Unknown (created by Route())
    in Route (created by Route())
    in LocationProvider (created by Route())
    in Route() (created by RootRoute)
    in RootRoute (created by ContextNavigator)
    in InitialRootStateProvider (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by NavigationContainer)
    in NavigationContainer (created by ContextNavigator)
    in RootRouteNodeProvider (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by ExpoRoot)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandler)
    in GestureHandler (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App) (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

排查步骤 #

1. 检查Layout组件的导出逻辑 #

错误栈明确指向Layout组件的渲染问题，优先定位到该组件文件：

• 确认组件添加了正确的导出关键字：
  • 默认导出示例：export default function Layout() { /* 组件逻辑 */ }
  • 命名导出示例：export function Layout() { /* 组件逻辑 */ }
• 避免仅定义组件但未添加export的情况。

2. 核对组件的导入方式 #

检查所有导入Layout组件的文件，确保导入语法与导出语法严格匹配：

• 若为默认导出，导入语句应为：import Layout from './Layout';
• 若为命名导出，导入语句应为：import { Layout } from './Layout';
• 禁止混用两种导入方式，比如默认导出使用花括号导入，或命名导出直接导入。

3. 排查第三方组件的导入与版本兼容 #

如果Layout组件中使用了第三方库的组件：

• 确认第三方组件的导入语法符合官方文档要求，部分库仅支持默认导入，部分仅支持命名导入
• 检查React、Expo及相关依赖的版本兼容性：
  • 执行npm list react expo查看当前依赖版本
  • 对照官方文档确认各依赖版本是否匹配，避免因版本不兼容导致组件无法正常加载

4. 清理缓存并重启开发服务 #

若以上步骤未解决问题，尝试清除缓存并重启服务：

• 终止当前Expo开发服务器（按下Ctrl+C）
• 执行缓存清理命令：npx expo start --clear
• 重新使用Expo Go扫码加载项目

内容的提问来源于stack exchange，提问作者Neddy Glen Jean Baptist