Zenn
😸

T3 Turboで "Check the render method of `GestureHandlerRootView`" エラー

2023/06/17に公開
Android
TypeScript
pnpm
T3 Stack
t3turbo
tech

問題

T3 Turbo のテンプレートを使っています。

https://github.com/t3-oss/create-t3-turbo

pnpm dev で下記のエラー表示。

@acme/expo:dev:android:  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.
@acme/expo:dev:android: Check the render method of `GestureHandlerRootView`.

解決

GestureHandlerRootView にあたるものが無い様子。

https://stackoverflow.com/questions/71396210/rngesturehandlerrootview-was-not-found-in-the-uimanager

上記の通り、expo のパッケージに react-native-gesture-handler 入れてあげる。
互換性などもあるようで、expo自身に任せてあげるのが最適。

pnpm --filter expo exec expo install react-native-gesture-handler

参考

pnpm version

 02:28:52  ❯ pnpm --version      
8.6.2

node version

 02:28:53  > node --version               
v18.16.0

expo package.json

  "dependencies": {
    "@expo/metro-config": "^0.7.1",
    "@shopify/flash-list": "1.4.0",
    "@tanstack/react-query": "^4.29.13",
    "@trpc/client": "^10.30.0",
    "@trpc/react-query": "^10.30.0",
    "@trpc/server": "^10.30.0",
    "expo": "^48.0.19",
    "expo-constants": "~14.2.1",
    "expo-linking": "~4.0.1",
    "expo-router": "^1.7.6",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "superjson": "1.12.3"
  },
  "devDependencies": {
    "@acme/api": "^0.1.0",
    "@acme/eslint-config": "^0.1.0",
    "@acme/tailwind-config": "^0.1.0",
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/runtime": "^7.22.5",
    "@expo/config-plugins": "^6.0.2",
    "@types/babel__core": "^7.20.1",
    "@types/react": "18.0.27",
    "@types/webpack-env": "^1.18.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.42.0",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.3"
  },

root workspace package.json

  "dependencies": {
    "@acme/eslint-config": "^0.1.0",
    "@ianvs/prettier-plugin-sort-imports": "^4.0.2",
    "@manypkg/cli": "^0.21.0",
    "@types/prettier": "^2.7.3",
    "eslint": "^8.42.0",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "turbo": "^1.10.3",
    "typescript": "^5.1.3"
  }

ログ全文

@acme/expo:dev:android:  ERROR  Warning: React.jsx: 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.
@acme/expo:dev:android: 
@acme/expo:dev:android: Check the render method of `GestureHandlerRootView`.
@acme/expo:dev:android:     in GestureHandlerRootView (created by ExpoRoot)
@acme/expo:dev:android:     in ExpoRoot (created by App)
@acme/expo:dev:android:     in App (created by withDevTools(App))
@acme/expo:dev:android:     in withDevTools(App)
@acme/expo:dev:android:     in RCTView (created by View)
@acme/expo:dev:android:     in View (created by AppContainer)
@acme/expo:dev:android:     in RCTView (created by View)
@acme/expo:dev:android:     in View (created by AppContainer)
@acme/expo:dev:android:     in AppContainer
@acme/expo:dev:android:     in main(RootComponent)
@acme/expo:dev:android:  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.
@acme/expo:dev:android: 
@acme/expo:dev:android: Check the render method of `GestureHandlerRootView`.
@acme/expo:dev:android: 
@acme/expo:dev:android: This error is located at:
@acme/expo:dev:android:     in GestureHandlerRootView (created by ExpoRoot)
@acme/expo:dev:android:     in ExpoRoot (created by App)
@acme/expo:dev:android:     in App (created by withDevTools(App))
@acme/expo:dev:android:     in withDevTools(App)
@acme/expo:dev:android:     in RCTView (created by View)
@acme/expo:dev:android:     in View (created by AppContainer)
@acme/expo:dev:android:     in RCTView (created by View)
@acme/expo:dev:android:     in View (created by AppContainer)
@acme/expo:dev:android:     in AppContainer
@acme/expo:dev:android:     in main(RootComponent), js engine: hermes
@acme/expo:dev:android:  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.
@acme/expo:dev:android: 
@acme/expo:dev:android: Check the render method of `GestureHandlerRootView`.
@acme/expo:dev:android: 
@acme/expo:dev:android: This error is located at:
@acme/expo:dev:android:     in GestureHandlerRootView (created by ExpoRoot)
@acme/expo:dev:android:     in ExpoRoot (created by App)
@acme/expo:dev:android:     in App (created by withDevTools(App))
@acme/expo:dev:android:     in withDevTools(App)
@acme/expo:dev:android:     in RCTView (created by View)
@acme/expo:dev:android:     in View (created by AppContainer)
@acme/expo:dev:android:     in RCTView (created by View)
@acme/expo:dev:android:     in View (created by AppContainer)
@acme/expo:dev:android:     in AppContainer
@acme/expo:dev:android:     in main(RootComponent), js engine: hermes
^C@acme/expo:dev:android:  ELIFECYCLE  Command failed.

Discussion