Fixing the "Module not found: Can't resolve 'react-icons'" Error
Introduction
React is a popular JavaScript framework, used together with other packages, to create dynamic user interfaces. However, sometimes these packages can cause issues. One such problem is the "Module not found: Can't resolve 'react-icons'" error.
This Byte aims to help you understand and fix this error.
Why do you get this error?
The "Module not found: Can't resolve 'react-icons'" error typically occurs when the react-icons package is not installed correctly or is missing from your project's dependencies.
This package is a popular choice for adding icons to your React projects, and this error means your application can't find it in the node_modules directory.
Reinstalling Dependencies
One way to resolve this error is by reinstalling your dependencies. You might want to do this because, while react-icons is listed as a dependency, it might not actually be installed.
Start by deleting the node_modules directory and the package-lock.json file in your project root.
$ rm -rf node_modules
$ rm package-lock.json
After deleting, reinstall your dependencies using npm or yarn.
$ npm install
or
$ yarn
This process will create a fresh node_modules directory and package-lock.json or yarn.lock file. It ensures that all your dependencies, including react-icons, are actually installed.
Verify "react-icons" is a Dependency
Another thing you should do is to check the package.json file for your project. In case you're not aware, this file contains a list of all the dependencies your project needs. If react-icons is not listed in the dependencies object, you need to install it.
$ npm install --save react-icons
or
$ yarn add react-icons
After running one of these commands, react-icons should be added to your package.json file and node_modules directory, and the error should be resolved.
Note: Always remember to restart your development server after installing new dependencies. This allows your application to recognize and use the newly installed packages.
Conclusion
In this Byte, we showed how to resolve the "Module not found: Can't resolve 'react-icons'" error in React applications. This error typically occurs when the react-icons package is missing or not actually installed, and we also showed a few ways to resolve it.
