How to fix “Module not found: Can’t resolve ‘react-icons'” error

“Module not found: Can’t resolve ‘react-icons'” error occurs when webpack detects that the React project is missing the ‘react-icons’ library. This article will show you the cause and solutions to fix this error.

The reason for the error “Module not found: Can’t resolve ‘react-icons'”

React Icons is an icon compilation library that allows you to add icons from different libraries to your React project as SVG elements. React Icons includes icons from the following libraries:

• Ant Design Icons
• Bootstrap Icons
• Devicons
• Feather
• Flat Color Icons
• Font Awesome
• Game Icons
• Github Octicons icons
• Grommet-Icons
• Ionicons
• Material Design icons
• Remix Icon
• Typicons
• Weather Icons

To use the icons inside this library, you need to install them first. Otherwise, an error like the code below will appear.

Code:

import { AiFillAndroid, AiFillApple } from "react-icons/ai";

function App() {
    return (
        <>
            <h2>Operating System: </h2>
            <ul>
                <li>
                    IOS
                    <AiFillApple />
                </li>
                <li>
                    Android
                    <AiFillAndroid />
                </li>
            </ul>
        </>
    );
}

export default App;

Output:

So now we know the reason for the error, let’s find solutions to this problem in the next part of the article.

How to fix this error

Installing the ‘react-icons’ package

Because webpack detects that your project is missing the ‘react-icons’ library, we still try to access the resources inside it. We can reinstall it using npm or yarn commands like the below:

Terminal:

npm install react-icons

yarn add react-icons

When you run this command in the terminal, wait until the program has finished installing the library for the project, rerun the program, and you will see on the screen we can now use the icons inside of ‘react-icons.’

Once the ‘react-icons’ is installed, webpack will detect the package and the path to access its library of functions within the directory structure. We can access icons inside libraries like AiFillAndroid and AiFillApple by importing them and using them.

Checking the dependencies in the package.json file

If you have installed the library but when importing the icons, the error “Module not found: Can’t resolve ‘react-icons'” still appears, then you should check the dependencies in the package.json file. If webpack has recognized the library, the package.json file will look like below

Code:

"dependencies": {
     "react-icons": "^4.7.1",
}

When you finish installing the package with npm or yarn, automatically in the package.json file, there will be dependencies of the library you just installed. Here we have installed ‘react-icons’ library version 4.7.1, its latest version. Wish you success with the methods mentioned in the article

Summary

In summary, the article has told us the cause and solutions for the error “Module not found: Can’t resolve ‘react-icons'”. However, we recommend installing the ‘react-icons’ package because that will be the most comprehensive solution.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs