How To Fix “Module not found: Can’t resolve ‘popper.js'” Error In React

In this article, we will discuss the error message: “Module not found: Can’t resolve ‘popper.js'” in React. Check the information and figure out the solution.

Reproduce the error: “Module not found: Can’t resolve ‘popper.js'”

Popper.js is a compact Javascript library that helps you increase the speed of your website while retaining the functionality that requires a tooltip. It is often used in popular libraries today, such as Bootstrap, Foundation, and Material UI … It helps us solve a common problem in tooltips like positioning the element and displaying it as best as possible on different device screens.

When you don’t have popper.js library, then you will get the message “Module not found: Can’t resolve ‘popper.js'” because the ‘@popperjs/core‘ package is not installed on your machine yet.

For example, in your App.js:

import '@popperjs/core';
// ...

Output:

Solutions to fix this problem

To fix this problem, it’s very simple. You just need to install according to the installation instructions of the ‘@popperjs/core‘ package.

Use Package Manager

Open the terminal on your root directory and run this command:

:: Using npm
npm install @popperjs/core

:: Using yarn
yarn add @popperjs/core

If you can’t use these commands above, try re-running it with the --force flag.

:: Using yarn
yarn add @popperjs/core --force

Manually, you can open the package.json file and then enter the following line: "@popperjs/core": "<version_of_popperjs>" in the ‘dependencies’ object. Finally, run the command npm install.

After successfully installing the ‘@popperjs/core‘ package , ‘@popperjs/core‘ must be in the ‘dependencies’ object in package.json file. Otherwise, you have performed the incorrect installation. Your package.json file should look like this:

{
    ...
    "dependencies": {
     	...
      	"@popperjs/core": "^2.11.6",
      	...
    },
    ...
}

In case the error persists, try removing ‘node_modules’ folder and ‘package-lock.json‘ file, then execute npm install:

rm -rf node_modules

rm -f package-lock.json

npm install

Use the CDN

You can also use the CDN to install instead of running the commands as the above approach:

<!-- Version for Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>

<!-- Version for Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>

Get the link in the code above. Ensure only to get the linked part and not the whole line of code. Paste that link into your web browser, and it gives us the code for ‘popper.js’. For instance, here is the code you receive on the browser:

In your project, create a file named popper.min.js. Copy all the code, paste it into that file, and then save it. So it looks like your installation is complete.

In some situations, it would help if you restart the development server and IDE before continuing to avoid unexpected errors.

Summary

I have showed you how to solve the error “Module not found: Can’t resolve ‘popper.js'”. You can follow along to fix it. Thank you for your reading in this article!

Maybe you are interested:

• Module not found: Can’t resolve ‘react/jsx-runtime’
• Module not found: Can’t resolve ‘@mui/material’
• module not found: can’t resolve @emotion/react

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js