javascript - React Error: "React.createElement: type is invalid" when using GluestackUI and Select Component -

admin管理员组

文章数量:1432566

I am encountering the following error when running my React Native app:

ERROR  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely fot 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 `ForwardRef`.
    in Unknown (created by RHFInput)
    in FocusScope
    in ActionsheetContentContextProvider
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View)
    in MotionComponent
    in Unknown (created by StyledSelectActionsheetContent)
    in StyledComponent
    in Unknown
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View)
    in Unknown (created by Select.Content)
    in Select.Content
    in RCTView (created by View)
    in View (created by StyledView)
    in StyledComponent
    in RCTView (created by View)
    in View (created by OverlayView)
    in OverlayView (created by OverlayContainer)
    in PortalProvider (created by GluestackUIProvider)
    in StyledProvider (created by GluestackUIStyledProvider)
    in GluestackUIStyledProvider (created by GluestackUIProvider)
    in GluestackUIProvider (created by NativeBaseProvider)
    in NativeBaseProvider (created by App)
    in ToastProvider (created by GluestackUIProvider)
    in PortalProvider (created by GluestackUIProvider)
    in StyledProvider (created by GluestackUIStyledProvider)
    in GluestackUIStyledProvider (created by GluestackUIProvider)
    in GluestackUIProvider (created by App)
    in App (created by RootApp)
    in ReactNativeProfiler (created by RootApp)
    in RCTView (created by View)
    in View (created by __Sentry.TouchEventBoundary)
    in __Sentry.TouchEventBoundary (created by RootApp)
    in RootApp (created by withDevTools(RootApp))
    in withDevTools(RootApp)
    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)

I am using the following libraries and versions:

 "@gluestack-style/react": "^1.0.57",
 "@gluestack-ui/config": "^1.1.20",
 "@gluestack-ui/themed": "^1.1.61",
 "@gluestack-ui/themed-native-base": "^0.1.108",
 "react": "18.3.1",
 "react-native": "0.76.2",
 "expo": "^52.0.0",

I suspect the issue might be related to:

Incorrect imports (default vs named imports). GluestackUI configuration or component usage. Here's how I am importing and using the component:

import {
  Select,
} from '@gluestack-ui/themed-native-base';

const App = () => (
  <Select>
     <Select.Item value="1">Option 1</Select.Item>
                <Select.Item value="2">Option 2</Select.Item>
  </Select>
);

I've double-checked my imports, but the error persists.

What I've tried:

Verified the imports for Select and its subcomponents. Checked if any components are undefined. Confirmed that GluestackUI is correctly set up with its provider. Question: What could cause this error in this context, and how can I resolve it? Is there a specific configuration step or component usage pattern I might have missed?

p.s It appear after upgrade expo from 51 to 52 SDK

本文标签：