Title of my question says it all. I've been trying to create a React app with several "pages" using react-router-dom. Basically what I've done is prompt "npx create-react-app", create a few JS page files just to test the thing and prompt a"npm install react-router-dom". Nothing else.

Now when I try to import the Switch module from react-router-dom, my IDE (I'm using Jetbrains Webstorm) doesn't find the dependency. I've checked manually by for the missing dependencies inside the module folder at node_modules, and the dependency is really not there.

I've read several tutorials on react-router-dom, and nobody says anything about Switch being deprecated or something like that, so that can't be the case.

I don't know if any other information would be of help, but feel free to point it out in case there's more info I can provide. Any help would be appreciated.

My package.json looks like this:

{
  "name": "react-router-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Title of my question says it all. I've been trying to create a React app with several "pages" using react-router-dom. Basically what I've done is prompt "npx create-react-app", create a few JS page files just to test the thing and prompt a"npm install react-router-dom". Nothing else.

Now when I try to import the Switch module from react-router-dom, my IDE (I'm using Jetbrains Webstorm) doesn't find the dependency. I've checked manually by for the missing dependencies inside the module folder at node_modules, and the dependency is really not there.

I've read several tutorials on react-router-dom, and nobody says anything about Switch being deprecated or something like that, so that can't be the case.

I don't know if any other information would be of help, but feel free to point it out in case there's more info I can provide. Any help would be appreciated.

My package.json looks like this:

{
  "name": "react-router-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• javascript
• reactjs
• react-router
• react-router-dom

• Could you please add your package.json?, to see which version of react and react router are you using?, also a code snippet of your Switch import – Diego Bascans Commented Apr 12, 2020 at 2:31
• Maybe include a screenshot of the node_modules folder. – xehpuk Commented Apr 12, 2020 at 2:31
• Sure, I've added the package.json file in the original question. As for the import, a simple " import Switch from 'react-router-dom' " won't be possible since I can't find "Switch" on react-router-dom. – Jonas Castanheira Commented Apr 12, 2020 at 2:51
• Did you get an answer on this im getting the same problem. – delProfundo Commented Aug 27, 2020 at 1:35

2 Answers 2

Updated your v5 of react-router-dom to v6 and replace:

<Switch>
   <Route path={`${match.path}/me`}>
      <OwnUserProfile />
    </Route>
     <Route path={`${match.path}/:id`}>
        <UserProfile />
      </Route>
 </Switch>

in V6 same example

<Routes>
   <Route path="/" element={<Home />} />
   <Route path="users/*" element={<Users />} />
 </Routes>

See the upgrading doc in react-routers

This is a WebStorm IDE issue, not a problem with react-router-dom; the Switch component works just fine, it's WebStorm that is not able to find the dependency.

You mention that

I've checked manually by for the missing dependencies inside the module folder at node_modules, and the dependency is really not there.

but if you check in node_modules/react-router-dom the Switch.js file is indeed there.

You might try the steps outlined in this answer (it's for PhpStorm, but applies to WebStorm as well).

For me it did not work so I will have to live with the IDE warning.

Plese note that but problem goes away if Switch is imported from react-router instead of react-router-dom:

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

import {Switch} from 'react-router'

Since, according to this link "react-router-dom re-exports all of react-router's exports" maybe is this re-export that confuses WebStorm.