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
See https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files
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.
Downlaod required libraries.
Double check if they are in proper scope.
Related
cross post from github
I have two UI components library. One of them (#ikas/components) library does not have any issue but the other (same config) throw this error. Can anyone have any idea?
When i comment inhouse-components it is work. but when i open it it crash... any idea?
I try to external,
Also try add import React from "react" to tsx files. but there error is still there.
I am expecting the #ikas/inhouse-components is should also work as well as #ikas/components
I also control the dist (output folder) .d.ts and show React import different but I don't know if it's relevant
I am switching to React from SwiftUI, where I am expecting auto import of components which should be default in VSCode, According to my research. Unfortunately when I type the components, VSCode is not suggesting me the components. I have to manually type the component name also manually import the components, which is very slow and require too much effort.
How can I get auto completion of components and auto import in VSCode 1.57.0?
I had exactly the same issue with version 1.57.
Adding "security.workspace.trust.enabled": false to settings.json resolved the issue for me.
You can use a vscode extension.
I recommend to use Reactjs code snippets extension.
I just initialized a new project using create-react-app and everything was ok until I installed react-router-dom. Every time I start my development server I get a warning
./node_modules/webpack/buildin/global.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherApp\node_modules\webpack\buildin\global.js
Used by 1 module(s), i. e.
C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherApp\node_modules\mini-create-react-context\dist\esm\index.js
* C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherapp\node_modules\webpack\buildin\global.js
Used by 2 module(s), i. e.
C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherapp\node_modules\#pmmmwh\react-refresh-webpack-plugin\client\utils\safeThis.js
I found out it can be problem with my imports, but there is no problem with my imports. Every time i remove line with my react-router-dom import everything is ok.
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
I tried removing node_modules and installing npm again using different prompts (gitBash, cmd and powershell) but I still get this warning. Any ideas how to fix that? Currently my 'project' is just Root.js with some empty directories.
This issue is thrown after installing react-router-dom. Try removing it and see those errors gone. This particular error does not affect the codes you write. Even if you upload to heroku or netlify, it would be fine. I think it is a bug they are to fix soon.
I have a project in React, using Material UI, and I am applying one of their suggested methods to reduce my bundle size.
Basically, I need to install the babel-plugin-transform-imports package and update the way we import components:
// Replace this (Option 1):
import Button from "#material-ui/core/Button";
// Whith this (Option 2):
import { Button } from "#material-ui/core";
Everything is working fine, however, I would like to prevent the "wrong" imports (Option 1) in the future.
Is there a way to customize a ESLint rule that will force the Option 2 import ONLY when importing from the Material UI package?
I was reading about creating a custom ESLint rule, but would prefer to avoid that route.
To my knowledge, custom is your only way to go. The only difference between these syntax is importing the default export or a named export. So if you want to prevent default imports specifically for the material-ui packages, you would need to create a custom eslint rule that looked at import statements AND match against material-ui as you don't want to error on all default imports.
After some research, I found that Material UI created a package with their own custom ESLint rules:
NPM Package:
https://www.npmjs.com/package/eslint-plugin-material-ui
GitHub page:
https://github.com/mui-org/material-ui/tree/master/packages/eslint-plugin-material-ui
They have a rule to solve my issue (restricted-path-imports), but that is not published yet. When they publish it, that may be the best way to go for me.
Discussion about publishing the rule:
https://github.com/mui-org/material-ui/issues/15610#issuecomment-512804075
UPDATE 2022
#kajirikajiri actually made eslint plugin exactly for this!
https://github.com/kajirikajiri/eslint-plugin-mui-path-imports
I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package