質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

解決済

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

ap2c9w
ap2c9w

総合スコア31

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

1回答

1リアクション

0クリップ

1440閲覧

投稿2022/05/18 10:55

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

typescript

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]

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 }

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

ams2020👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

ap2c9w

2022/05/19 01:23

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

2022/05/19 01:23

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

2022/05/19 01:25

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

2022/05/19 01:25

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

2022/05/19 01:26

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。