Cannot resolve symbol useParams

Question

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.

Answer 1

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

See https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files