「'Stack.Navigator' を JSX コンポーネントとして使用することはできません。」のエラーを解決したい

Question

React Nativigationを利用するためにVisual Studio Codeで以下のように書いたところ、<Stack.Navigator>でエラーが発生します。

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import ShopScreen from '../screens/ShopScreen';
import { StackParamList } from '../types/Stack';
const Stack = createStackNavigator<StackParamList>();
const HomeStackNavigator = () => (
  <Stack.Navigator> // ← この部分で赤い波下線がでる
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen name="Shop" component={ShopScreen} />
  </Stack.Navigator>
);
export default HomeStackNavigator;

[エラーの内容]

'Stack.Navigator' を JSX コンポーネントとして使用することはできません。
  その要素の型 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { children: ReactNode; screenOptions?: StackNavigationOptions | ((props: { ...; }) => StackNavigationOptions) | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | undefined; } & StackRouterOptions & StackNavigationConfig,...' は有効な JSX 要素ではありません。
    型 'Component<Omit<DefaultRouterOptions<string> & { children: ReactNode; screenOptions?: StackNavigationOptions | ((props: { route: RouteProp<...>; navigation: any; }) => StackNavigationOptions) | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | undefined; } & StackRouterOptions & StackNavigat...' を型 'Element | ElementClass | null' に割り当てることはできません。
      型 'Component<Omit<DefaultRouterOptions<string> & { children: ReactNode; screenOptions?: StackNavigationOptions | ((props: { route: RouteProp<...>; navigation: any; }) => StackNavigationOptions) | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | undefined; } & StackRouterOptions & StackNavigat...' を型 'ElementClass' に割り当てることはできません。
        'render()' によって返された型は、これらの型同士で互換性がありません。
          型 'React.ReactNode' を型 'import("/Users/hiro/shop-review-app/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode' に割り当てることはできません。
            型 '{}' を型 'ReactNode' に割り当てることはできません。ts(2786)

[package.json]

{
  "name": "shop-review-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint 'App.tsx'",
    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
    "preinstall": "typesync || :"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.x",
    "@react-navigation/native": "5.9.6",
    "@react-navigation/stack": "^5.x",
    "@typescript-eslint/parser": "^5.24.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react-hooks": "^4.5.0",
    "expo": "~45.0.0",
    "expo-constants": "^13.1.1",
    "expo-status-bar": "~1.3.0",
    "firebase": "7.24.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-web": "0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/babel__core": "^7.1.19",
    "@types/eslint": "^8.4.2",
    "@types/prettier": "^2.6.1",
    "@types/react": "~17.0.21",
    "@types/react-dom": "17.0.2",
    "@types/react-native": "~0.66.13",
    "@typescript-eslint/eslint-plugin": "^5.24.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.28.0",
    "prettier": "^2.6.2",
    "typescript": "~4.3.5"
  },
  "private": true
}

本エラーを解消するにはどのようにしたらよいでしょうか。

Comments

[hoshi-takanori]

これかな。
https://github.com/react-navigation/react-navigation/issues/10507

[ap2c9w]

ありがとうございます!
示して頂いたgithubと同じ解決方法で解決いたしました。
@typesが重複してインストールされている可能性があるところまではたどり着いたのですが、packege.jsonだけ見ると重複してインストールされていることに気が付きませんでした。
yarn whyを叩く必要があると認識いたしました。
もし、よろしければ回答欄に同じことを書いていだけると嬉しいです。

[ap2c9w]

hiro@hiroMacBookAir shop-review-app % yarn why @types/react
yarn why v1.22.18
[1/4] 🤔 Why do we have the module "@types/react"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "@types/react@17.0.45"
info Has been hoisted to "@types/react"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "184KB"
info Disk size with unique dependencies: "1.37MB"
info Disk size with transitive dependencies: "1.37MB"
info Number of shared dependencies: 3
=> Found "@types/react-native-vector-icons#@types/react@18.0.9"
info Reasons this module exists
- "@types#react-native-vector-icons" depends on it
- Hoisted from "@types#react-native-vector-icons#@types#react-native#@types#react"
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3
=> Found "@types/react-dom#@types/react@18.0.9"
info This module exists because "@types#react-dom" depends on it.
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3
=> Found "@types/react-native#@types/react@18.0.9"
info This module exists because "@types#react-native" depends on it.
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3
✨ Done in 1.17s.

[ap2c9w]

上記のとおり、
@types/react@17.0.45
@types/react@18.0.9
で型定義ファイルが依存関係(でしょうか…)で重複してインストールされておりました。

[ap2c9w]

hiro@hiroMacBookAir shop-review-app % yarn remove @types/react
yarn remove v1.22.18
[1/2] 🗑 Removing module @types/react...
[2/2] 🔨 Regenerating lockfile and installing missing dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
success Uninstalled packages.
✨ Done in 11.11s.

[ap2c9w]

yarn remove @types/reactしてエラーが解消しております。
その後、yarn add @types/reactしたところ、@types/react@18.0.9がインストールされました。

Answer 1

https://github.com/react-navigation/react-navigation/issues/10507

hiro@hiroMacBookAir shop-review-app % yarn why @types/react
yarn why v1.22.18
[1/4] ?? Why do we have the module "@types/react"...?
[2/4] ?? Initialising dependency graph...
[3/4] ?? Finding dependency...
[4/4] ?? Calculating file sizes...
=> Found "@types/react@17.0.45"
info Has been hoisted to "@types/react"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "184KB"
info Disk size with unique dependencies: "1.37MB"
info Disk size with transitive dependencies: "1.37MB"
info Number of shared dependencies: 3
=> Found "@types/react-native-vector-icons#@types/react@18.0.9"
info Reasons this module exists
- "@types#react-native-vector-icons" depends on it
- Hoisted from "@types#react-native-vector-icons#@types#react-native#@types#react"
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3
=> Found "@types/react-dom#@types/react@18.0.9"
info This module exists because "@types#react-dom" depends on it.
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3
=> Found "@types/react-native#@types/react@18.0.9"
info This module exists because "@types#react-native" depends on it.
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3
? Done in 1.17s.

上記のとおり、
@types/react@17.0.45
@types/react@18.0.9
で型定義ファイルが依存関係(でしょうか…)で重複してインストールされておりました。

hiro@hiroMacBookAir shop-review-app % yarn remove @types/react
yarn remove v1.22.18
[1/2] ?? Removing module @types/react...
[2/2] ?? Regenerating lockfile and installing missing dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
success Uninstalled packages.
? Done in 11.11s.

yarn remove @types/reactしてエラーが解消しております。
その後、yarn add @types/reactしたところ、@types/react@18.0.9がインストールされました。