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

Question

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

Answer 1

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, ie 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.

Answer 2

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

Answer 3

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.

Answer 4

This sometimes occurs when you install dependencies in the wrong directory.

let's say you run npm i package-x outside your project directory