Cannot resolve symbol 'Routes'

Question

I am importing Routes the following way

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

My package JSON is "react-router-dom": "^6.0.2",

I am using Pycharm.

npm list react-router-dom returns -- [email protected]

Why is this happening? My frontend is blank.

Answer 1

I had the exact same issue of "Cannot Resolve Symbol" for most of the imports in Intellij, when I upgraded to the react-router-dom:6.0.2.

As @DLH stated, the Jetbrains Product was reading the type file for the package from <system directory>/jetbrains/intellij/javascript/typings rather than from the node_modules folder of the project.

As said by Oksana Chumak from Jetbrains:

The IDE downloads typings for some popular libraries to its configuration folder and uses them to enhance code completion.

Solution:

1. Inside the jetbrains product, press shift two times to open the search everywhere window, search for registry and open the first result.

2. In the registry, look for typescript.external.type.defintions.packages key and in the value of that field, only remove the react-router-dom field from the values.

3. Also Delete the react-router-dom package folder from this location, <system directory>/users/{name}/AppData/Local/jetbrains/intellij/javascript/typings

Now, the jetbrains product will read the type file from node_modules of project, rather than reading it from its internal typings folder. In the future, It will also not try to download and use the intellij react-router-dom typings for other projects.

Answer 2

I just had the same problem in WebStorm. When I did the crtl-click over 'react-router-dom' in the import statement, I saw that it seemed to be confused over which index.ts.d file to pay attention to. One was from the 6.0.2 version installed in my project's node_modules as expected. The other was in C:\Users[me]\AppData\Local\JetBrains\WebStorm2021.2\javascript\typings\react-router-dom\5.3.2\node_modules@types\react-router-dom\index.d.ts.

I just renamed the latter JetBrains file from 5.3.2 figuring that it was now obsolete, and it worked as expected thereafter. It's not the prettiest solution, and I'm only mostly sure that it won't find a way to bite me in the rump later. But at least for now, it works.

Answer 3

We can try removing node_modules and deleting that folder. Then we can run npm this will reinstall those packages again.

After that, I would then try implement the Router and see if it resolves itself even though it complains that it can't find the symbol.

Something like this should work:

<BrowserRouter>
  <Routes>
    <Route path='/*' element={ <App /> } />
  </Routes>
</BrowserRouter>

Answer 4

I resolved the blank screen, it was because of the version so I had to change the code based on https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md, but I still have a warning "Cannot resolve symbol 'Routes'"I'm using the latest version of Webstrom.

import React from "react";
import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

const  App = () => {
  return(
    <Router>
      <Header />
      <main className='py-3'>
          <Container>
              <Routes>
                  <Route exact path="/" element={<HomeScreen />}/>
              </Routes>
          </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

Answer 5

You have to install Typescript stubs for the package

You have two options:

1. Install it with IDE

• Put cursor on "react-router-dom" in import statement
• hit Alt+Enter
• choose Install TypeScript definitions for better type information

2. Install it with npm

• open cmd at your project
• npm install @types/react-router-dom

Don't forget to remove IDE library from Preferences | Languages & Frameworks | JavaScript | Libraries , if you used option 1