ウェブサイト検索

reactjs - TypeScript の Module にエクスポートされたメンバーが存在しないという .ts(2305) エラーは何が原因で発生し、どのように修正しますか？

これは私がReactでTypeScriptを使うのは初めてで、TypeScriptのModule has no exported member .ts(2305)というエラーで非常に多くの問題に直面しています。これが発生する2つの例を紹介します：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

エラー：

'"react-router-dom"' has no exported member named 'Routes'. Did you mean 'Route'?ts(2724)

そしてここ

import { useNavigate } from 'react-router';

エラー：

Module '"react-router"' has no exported member 'useNavigate'.ts(2305)

最後の例：

import { MaterialCommunityIcons } from 'react-native-vector-icons';

エラー :

Module '"react-native-vector-icons"' has no exported member 'MaterialCommunityIcons'.ts(2305)

参考になれば、こちらが私の package.json ファイルです：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/history": "2.0.45",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "3",
    "@types/react-router-dom": "^5.1.8",
    "community": "^0.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "history": "^5.0.1",
    "icons": "^1.0.0",
    "material": "^0.4.3",
    "prettier": "^2.3.2",
    "react": "^17.0.1",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.1",
    "react-native-vector-icons": "^8.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-vector-icons": "^0.0.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },

この問題が発生したときにどうすれば解決できますか？特にこの3つの問題について聞いているわけではなく、Module has no exported member .ts(2305) エラーをどのように解決するかについてです。このエラーはよく発生するようです。

私が何度か読んで試してみたことは、型定義をこのようにインストールすることです（そうだと思いますが）：

`yarn add @types/react-router-dom` と `yarn add @types/react-router`、そして最後に `yarn add @types/react-native-vector-icons` と試して、単に `yarn install` を実行しても、この問題は一度も解決されませんでした。

回答 #1

TypeScript サーバーを再起動したら、私にはうまくいきました：

ctrl+shift+p > Typescript: TSサーバーを再起動（Enterキーを押す）

回答 #2

もし v5 からアップグレードしていてこの問題が発生している場合、私は @types/react-router-dom の依存関係を削除しました。すると、この問題は解決しました。なぜなら、v6 の型は react-router-dom に同梱されていたからです。@types の依存関係自体は v5 から更新されていませんでした。

関連記事