Module not found: Can't resolve 'react-icons/ai' - reactjs

I am learning ReactJS. But now I got a problem. I used this code
import { AiOutlineShoppingCart } from "react-icons/ai"
But it is showing this error:
Module not found: Can't resolve 'react-icons/ai'
I am using sanity to build an eCommerce website cms. I tried to install react-icons with this code
yarn add react-icons
and I have checked the packages .jeson file and react-icons are present in dependencies. Can anyone please tell me how can I solve this problem?
Some extra info:
I have also use react-icons instead of react-icons/ai but same error
I have used npm install to install react-icons. Nothing helps


Firstly, you should be aware that not all icons are available. I sometime try to import some icons and I get error.
Secondly, make sure you copy the code from the website to make sure you didnot misspell the name
Futhermore, you can delete your node_module and remove react-icons from package.json file, then do yarn add react-icons and do yarn to install all your packages again
Lastly, you're to import from the library that owns the icon, i.e. if you're importing from AiFillAudio, you're to import it from react-icons/ai. eg.
import { AiFillAudio } from react-icons/ai.
I hope this help you out.


try reinstalling with npm install react-icons --save command


I figured it out. My react-icons are installed in sanity the folder. So when I was importing AiOutlineShoppingCart from react-icons, my program was looking for react-icons inside node_module of my main file. But it is stored node_module of sanity. So I have to declare the whole path.
Working code is
import { AiOutlineShoppingCart } from "../sanity/node_modules/react-icons/ai"
Here, "sanity" means sanity folder name.
Thanks, everyone for helping me.


This sometimes occurs when you install dependencies in the wrong directory.
let's say you run npm i package-x outside your project directory

Related

Could not find a declaration file for module 'react-query'

I am refactoring a piece of code and it shows this type of error whenever I try to import "react-query

I ran into the same thing and had to downgrade to version 3.
npm i react-query#3
Or for 4+
npm i #tanstack/react-query

It's because you are importing into a TypeScript file and it can't find the type declaration for the imported module. Normally all you need to do is to follow the given instructions and open a command prompt, go to the directory D:\overview and type:
npm i --save-dev #types/react-query

react-query was renamed to #tanstack/react-query in v4. You need to rename all your imports from react-query to #tanstack/react-query.
You don't need to install #types/react-query. v4 is already written in typescript.

Import error for react-icons. Module not found: Can't resolve 'react-icons/io' in '/usr/src/app/src/...'

In my React app, which was built using create-react-app, I'm getting the error:
Module not found: Can't resolve 'react-icons/io' in '/usr/src/app/src/components/analytics_components'.
The app has been working fine for a while but I just rebuilt it using Docker Compose and now it's not.
It seems like it's looking in the wrong directory, src instead of node_modules.
react-icons is definitely installed, npm list react-icons returns its version number.
I can see the io folder in node_modules/react-icons
The import statement:
import { IoMdList } from "react-icons/io";
When I change the import to explicitly point to the node_modules directory, it works, but I didn't need to do this before nor do I need to for any other packages, which are still all working correctly:
import { IoMdList } from "../../../node_modules/react-icons/io";

I just reinstall the command npm install react-icons and then it works.

Again you can install npm if you already installed that doesn't matter you can re-install your npm again without deleting current node module. it works for me. command: npm install

you can try delete your node module folder and run cmd:npm install or yarn install it may solve your problem

react-bootstrap-table-next doesn't have type script to support import

After I installed react-bootstrap-table-next, I tried to use
"import BootstrapTable from 'react-bootstrap-table-next';" in my tsx file. As example showed in here
I got error message says "Could not find a declaration file for module 'react-bootstrap-table-next'. '../node_modules/react-bootstrap-table-next/lib/index.js' implicitly has an 'any' type."
And I run npm install #types/react-bootstrap-table-next, but couldn't find any.
Does anyone has same issue? or how did you solve the problem?
Ron

Right now it looks like there are no plans to support Typescript by the team that develop the project.
You can track the develop of the issue here on this issue and maybe you can vote up. I'm also waiting for it.

You can use this package. There is support for TypeScript now.
npm install --save #types/react-bootstrap-table-next
or
yarn add #types/react-bootstrap-table-next

try running
npm install react-bootstrap-table-next --save

No baseThemes inside 'material-ui' npm package

I decided to try http://www.material-ui.com/ with darkBaseTheme.
But when I installed package via
npm i --save material-ui
I got the package without styles/baseTheme folder. That's why I can't import this theme with code from an example:
...
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
...
Can someone please tell me what did I do wrong? I'm a little bit stuck here

Looks like in the latest v1-beta baseThemes not included at all.
Here is the repository with the last commit at that moment

Module not found: Can't resolve 'material-ui/AutoComplete'

I installed material-ui-search-bar and then I want to use SearchBar.
But I have next problem:
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve 'material-ui/AutoComplete' in '...node_modules/material-ui-search-bar/lib/components/SearchBar'
How can I fix it?

AutoComplete is associated with Lab package of material UI. On Adding the "lab" package AutoComplete can be used. Add using yarn
yarn add #material-ui/lab
or using npm
npm install #material-ui/lab

I cannot upvote nor comment, so I just parrot the working solution.
Thanks, #blackspacer.
This works:
npm install #material-ui/lab
One expects all Material UI elements to be present after the initial package install, but there is an exception.
https://material-ui.com/components/about-the-lab/
About the lab
This package hosts the incubator components that are not yet ready to
move to the core.
Installation Install the package in your project directory with:
// with npm
npm install #material-ui/lab
// with yarn
yarn add #material-ui/lab

Install material-ui using this command :
npm install material-ui#latest

This can happen due to multiple reasons.
1) You are using the beta version of v1.0 launch of material-ui which has breaking changes. Try switching to the stable version. Or if you want to use the latest beta version, then use
Refer below link:
https://material-ui-next.com/demos/autocomplete/material-ui AutoComplete
2) Try importing like below:
import AutoComplete from 'material-ui/AutoComplete';
or
import { AutoComplete } from 'material-ui/AutoComplete';
Due to the port going on for #next version the modules are being reorganized and hence few components are breaking.

The only solution that worked is uninstall material-ui-search-bar and install using npm install material-ui-search-bar#beta

Use npm i #autocomplete/material-ui in your terminal.
Then run npm start, issue will be resolved.
import { Autocomplete } from '#autocomplete/material-ui';
Further more information or to try the template on another file for testing - use the below reference link.
[1]:https://www.npmjs.com/package/#autocomplete/material-ui

npm -i #material-ui/core
as more packages may be needed. For me besides lab i also needed utils. Hope this helps.

yarn add material-ui-icons
Try using this in project directory

Install beta version npm install material-ui-search-bar#beta
My issue got resolved after installing beta version.

This question is 4 years old so some of the answers here are no more correct. In 2022 and on v5.5, this is no more a lab component, but another reason you might be still getting this error:
export 'AutoComplete' (imported as 'AutoComplete') was not found in '#mui/material'
is if you're still using the old name. Its name has changed from "AutoComplete" to "Autocomplete", i.e., the letter c is no more capital.
So if you have something like:
import AutoComplete from #mui/material/AutoComplete
...just change it to this:
import Autocomplete from #mui/material/Autocomplete

This is a nice example for your problem try it.
import Tab from '#material-ui/core/Tab'

I guess you are not importing Autocomplete correctly .
For more information Visit here
Import like this.
import Autocomplete from '#material-ui/lab/Autocomplete';

Resources