What causes the typescript Module has no exported member .ts(2305) error and how do you fix it?

Question

This is my first time using typescript with React and I'm have a tremendous amount of trouble with the typescript Module has no exported member.ts(2305) error. Here are 2 examples of this happening:

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

Error:

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

And here

import { useNavigate } from 'react-router';

Error:

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

Last example:

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

Error:

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

Here is my package.json file if that helps:

{
  "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"
  },

What can I do to fix this issue when it comes up? I'm not exactly asking about these 3 particular issues, but how to solve the Module has no exported member.ts(2305) error because it seems to come up often.

What I have read a couple times and have tried to do is install the type definitions (I think?) like this:

yarn add @types/react-router-dom and yarn add @types/react-router and finally yarn add @types/react-native-vector-icons and trying simply yarn install but this has never solved the problem.

Answer 1

Restarting the typescript server worked for me:

ctrl+shift+p > Typescript: Restart TS server (click enter)

Answer 2

well for instans react-router-dom version 5 the one in your package json does not have Routes, version 6 is the one with Routes. here you can find more info https://reactrouter.com/web/guides/quick-start

Answer 3

This is not a general error, it is a very specific one. This error tells you that you are trying to import something that doesn't exist.

And the answer for each depends on what you are importing.

• Routes is not a named export of react-router-dom . Nowhere in the documentation is the the characters <Routes . I dont know what you think you're importing, but you probably wanted something else.

• MaterialCommunityIcons is not a named export of react-native-vector-icons . According to the documentation you need to import that like this:

   import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

• useNavigate is not a named export of react-router . The documentation lists useNavigation . Did you mean to import that instead?

As you can see, there is not a one size fits all solution. You must consult the documentation and try to find what you want to import and ensure that you get the right thing.

Answer 4

If you're upgrading from v5 and see this issue, I was able to remove the @types/react-router-dom dependency entirely. Types for v6 were shipped with react-router-dom v6 and the @types dependency wasn't bumped.