【ReactNative開発】Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.エラーが発生する

こんにちは、今週末もReactNative開発のトラブルシューティングメモです。今回は、Native Baseライブラリをアップデートしたことでハマりました・・・。

前提

• React Native + Type Script + Expoでの開発

問題

NativeBaseライブラリのバージョンを2.x系から3.x系にあげると、以下のエラーがでてアプリが起動しなくなってしまった。

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 `SignInScreen`.

This error is located at:
    in RCTView (at View.js:34)
    in View (at signin.screen.tsx:19)
    in RCTView (at View.js:34)
    in View (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(View))
    in Styled(View) (at Box/index.tsx:88)
    in ForwardRef(Box)
    in ForwardRef(Box) (at Container/index.tsx:12)
    in ForwardRef(Container)
    in ForwardRef(Container) (at signin.screen.tsx:18)
    in SignInScreen (created by inject-with-stores(SignInScreen))
    in inject-with-stores(SignInScreen) (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at app.navigator.tsx:144)
    in AuthFlow (at app.navigator.tsx:304)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at app.navigator.tsx:302)
    in AppNavigator (created by inject-with-stores(AppNavigator))
    in inject-with-stores(AppNavigator) (at App.tsx:40)
    in MobXProvider (at App.tsx:39)
    in SSRProvider (at NativeBaseProvider.tsx:66)
    in ToastProvider (at NativeBaseProvider.tsx:65)
    in PortalProvider (at NativeBaseProvider.tsx:64)
    in HybridProvider (at NativeBaseProvider.tsx:60)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at NativeBaseProvider.tsx:55)
    in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:54)
    in ThemeProvider (at NativeBaseProvider.tsx:53)
    in NativeBaseProvider (at App.tsx:38)
    in App
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at node_modules/@react-navigation/core/src/useSyncState.tsx:29:2 in useSyncState
at node_modules/@react-navigation/core/src/useOnAction.tsx:90:10 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/useNavigationHelpers.tsx:37:4 in useNavigationHelpers
at http://10.191.226.66:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:119878:29 in dispatch
at node_modules/@react-navigation/core/src/useNavigationCache.tsx:73:25 in dispatch
at app/screens/splash.screen.tsx:10:5 in SplashScreen
at [native code]:null in callFunctionReturnFlushedQueue

原因と解決方法

このStack Overflowを見て、解決した。理由は簡単、importの仕方が悪かった。

importしようとしたパッケージが見つけられなかったからUndefinedとなってエラーが出るようだ。

https://stackoverflow.com/questions/44897070/element-type-is-invalid-expected-a-string-for-built-in-components-or-a-class

今回は、以下のようにコードを変更して解決。

Before

import XXXXXXX

After

import {XXXXXX}

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。