Resolving "Module not found: Can't resolve 'popper.js'" Error

Introduction

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 node_modules directory.

Reinstalling Dependencies

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

The --save flag ensures that it's included in the dependencies section of your package.json file.

Conclusion

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.