I'm creating an app with react in using WebStorm. I am attempting to use react-router-dom useParams. I have react-router-dom 5.1.2 as a dependency, but useParams is grayed out in import statement. When I hover over useParams it says "Cannot resolve symbol useParams". I am also trying to import Switch and i'm receiving a similar message "Cannot resolve symbol Switch". What's even more unusual is Link is being imported from react-router-dom.
node_modules/react-router-dom/esm/react-router-dom.js re-exports Switch, Root, useParams from react-router. But the latter is not listed as a direct dependency in your package.json and thus is excluded from indexing.
You can un-exclude it by choosing Mark Directory as/Not excluded from node_modules/react-router right-click menu:
But I'd strongly recommend installing Typescript stubs for the package for better completion/type hinting instead: put cursor on "react-router-dom" in import statement, hit Alt+Enter, choose Install TypeScript definitions for better type information
I was encountering the same issue in 2020.1. I didn't have the Alt+Enter option of installing TypeScript definitions. I had to go to File > Settings > Languages & Frameworks > JavaScript > Libraries and Download... @types/react-router to make the warning go away. I never would have thought to download the react-router types if it weren't for lena's answer.
The list is a little daunting because at first glance it looks like you have to scroll through it, but, if you click on one of the entries and start typing, a search box should appear.
Beside of adding proper library you need to add proper scope for your project.
