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 Go to File -> Invalidate Caches -> select "Clear file system cache and Local History" -> click "Invalidate and Restart"

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.

Credits: Props to @Mir-Ismaili and @unfestive chicken for helping out with the third step.

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.