In this Byte, we'll be taking a look at how to resolve the "Module not found: Can't resolve 'popper.js'" error that you'll sometimes see when working with React applications.
The 'popper.js' error is usually due to an issue with the installation of the popper.js library, which is a dependency of many React components, like tooltips and dropdowns in libraries like Bootstrap.
The full error message might look something like this:
Module not found: Can't resolve 'popper.js' in '/path/to/your/project'
This error means that your application is trying to import the
popper.js module, but it can't find it in the
One of the most common ways to resolve this issue is to reinstall your dependencies. To do this, simply delete your
node_modules directory and your
package-lock.json file, and then run
npm install again. Here's how you can do this from your command line:
$ rm -rf node_modules
$ rm package-lock.json
$ npm install
This will reinstall all your dependencies and will often resolve issues, as the
popper.js package should now be present, along with the other dependencies.
Checking @popperjs/core in Dependencies
If reinstalling your dependencies doesn't work, the next thing to check is whether
@popperjs/core is actually included in your dependencies in your
package.json file. If it's not, you'll need to install and save it. Here's how you can do this from your command line:
$ npm install @popperjs/core --save
--save flag ensures that it's included in the
dependencies section of your
In this Byte, we've discussed how to resolve the "Module not found: Can't resolve 'popper.js'" error in React applications. This error is typically due to a missing dependency, and can often be resolved by reinstalling your dependencies, or by adding the package to your
package.json dependency list.