Switch and Router modules missing from react-router-dom

Question

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"
    ]
  }
}

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
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

Fabio Moratti Fabio Moratti · Accepted Answer · 2020-11-30T10:52:21

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.

Switch and Router modules missing from react-router-dom

1 Answers