'Switch' is not exported from 'react-router-dom'

| error message |

SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=0634216f' does not provide an export named 'Switch'

| tech |

Vite as the local server with TypeScript

| solution |

In react-router-dom v6, "Switch" is replaced by routes "Routes". Here are the related updates you should make to your code:
update:

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

to:

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

update:

<Route path="/" component={Home} />

to:

<Route path='/' element={<Home/>} />

Other steps you may take to resolve this issue:

1) Check react-router-dom Version: Make sure that you're using the up-to-date version for 'react-router-dom'

2) Verify Import Statement: Double-check your import statement for the "Routes" component.

3) Check node_modules Directory: Verify that react-router-dom is installed in your node_modules directory. You can navigate to your project directory and check if there's a react-router-dom folder inside the node_modules folder.

4) Check package.json: Open your package.json file and ensure that react-router-dom is listed as a dependency. It should look something like this:

"dependencies": {
    "react-router-dom": "^X.X.X",
    ...
}

Happy coding!
Eva

Reference: https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom
More recouce:
https://reactrouter.com/en/main/upgrading/v5