Cannot resolve symbol useParams

4
votes

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.

enter image description here enter image description hereenter image description here

3
reactjsreact-routerreact-hookswebstormreact-router-dom
Just curious, does it still compile and run? Is it just intellisense not picking it up? - Alex K
@AlexK it runs but crashes when I click on any product link. Also, when console log thisProduct it returns undefined - user3574939
That's strange, nothing stands out from those images, do you have a repro you can provide from codesandbox or something similar? - Alex K
@user3574939 Your .find() is failing because productId from the route params is a string where your ids in your data are numbers. You need to convert productId to a number (multiple ways to do that, I used a +), I forked and corrected your sandbox here: codesandbox.io/s/heuristic-elbakyan-k07qc - Alex K
Whenever you use a .find() it's a good idea to handle the case where it doesn't return a value since it can always potentially return undefined to prevent the entire app from crashing. - Alex K

3 Answers

14
votes

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:

enter image description here

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

enter image description here

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

3
votes

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.

enter image description here

enter image description here

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.

0
votes

Beside of adding proper library you need to add proper scope for your project.

  1. Downlaod required libraries.
  2. Double check if they are in proper scope.

please take a look at image