Many of you, like us, may continue to encounter numerous errors while using the app.

One of the most frequently asked errors, for example, is “Module not found :can’t resolve popper.js in Reactjs“. So, how can this be resolved? We will discuss together to figure out the best solutions for you.

When Does The Error “Module not found :can’t resolve popper.js in Reactjs” Happen?

Today when you run your project in your app, you face an error like this.

Module not found: Error: Can't resolve '@popperjs/core' in 'D:\My_Project\nfc_app\node_modules\bootstrap\dist\js'

Solutions To  Solve ”Module not found :can’t resolve popper.js in Reactjs”

Solution 1: For Bootstrap 5 users

The most widely used CSS framework for creating responsive and mobile-first websites is called Bootstrap. It offers a collection of vocabulary for template designs in order to make the web building process for responsive, mobile-first websites easier.

To put it simply, Bootstrap allows web designers to creat websites more speedily by diminishing them of the burden of learning basic commands and functions. It consists of scripts built on the CSS, HTML, and JS platforms for a lot of web design-related attribute and operations.

The most recent version of Bootstrap is 5. You also can use Bootstrap 5 to resolve ”Module not found :can’t resolve popper.js in Reactjs” error.

For using Bootstrap 5, you must use this command to install popperjs/core. For those who use NPM.

npm install @popperjs/core --save

For Yarn Users, you can use this code.

yarn add @popperjs/core

Now, you need to import bootstrap using a code like this.

import 'bootstrap/dist/js/bootstrap.bundle';

Solution 2: Install the popper.js

Let’s follow this process to solve the error ”Module not found :can’t resolve popper.js in Reactjs”.

You only need to use this command line to install popper.js. For those who use npm.

npm install popper.js --save

However, if you are using Bootstrap 5, Popper.js Core is required. So all you have to do is install Popper.js Core for Bootstrap 5. Execute this command.

npm install @popperjs/core --save

And then you can import like this.

import 'jquery';

import '@popperjs/core'; // Edit here

import 'bootstrap/dist/js/bootstrap.bundle';

This may resolve your error.

Solution 3: Import using this code

Excepting the above mentioned solutions, there is another method for you. It’s that you must save the file popper.min.js and then import it as shown.

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import 'bootstrap/dist/css/bootstrap.css';

import './index.css';

import 'bootstrap/dist/js/popper.min.js';

global.jQuery = require('jquery');

require('bootstrap');

This is a very simple method, right? But its efficiency is very enormous. It makes you unbelieveable. Now, your error is completely fixed, it doesn’t exist.

Conclusion

If you’re stuck on the error “Module not found :can’t resolve popper.js in Reactjs“, the remedies listed above are the fastest way. People have a growing community where everybody is usually willing to help if you still need advice or have frequent doubts. Finally, we hope you’re having fun with the amazing code options and appreciate spending time reading.

Read more

→ Approaches For The Error: Module not found: Can’t resolve ‘@material-ui/core/Container’ in Reactjs?