Hello Guys, How are you all? Hope You all Are Fine. Today I am facing following error: Module not found :can’t resolve popper.js in Reactjs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
How Module not found :can’t resolve popper.js Error Occurs ?
I am facing following error.
Module not found: Error: Can't resolve '@popperjs/core' in 'D:\My_Project\nfc_app\node_modules\bootstrap\dist\js'
How To Solve Module not found :can’t resolve popper.js Error ?
How To Solve Module not found :can’t resolve popper.js Error ?
To Solve Module not found :can’t resolve popper.js Error If You are using Bootstrap 5 users you need to install popperjs/core with the help of this command. For NPM Users: npm install @popperjs/core –save For Yarn Users: yarn add @popperjs/core Now, Import bootstrap just like this: import ‘bootstrap/dist/js/bootstrap.bundle’; Now, Your issue must be solved.
Module not found :can’t resolve popper.js
To Solve Module not found :can’t resolve popper.js Error You Just Need to install popper.js with this command line. For npm Users: npm install popper.js –save But If you are using Bootstrap 5 then Bootstrap 5 requires Popper.js Core So You just need to install Popper.js Core for Bootstrap 5. Just run this command: npm install @popperjs/core –save and then import like this: import ‘@popperjs/core’; Now, Your error must be solved.
Solution 1: install popper.js
You Just Need to install popper.js with this command line. For npm Users.
npm install popper.js --save
But If you are using Bootstrap 5 then Bootstrap 5 requires Popper.js Core So You just need to install Popper.js Core for Bootstrap 5. Just run this command.
npm install @popperjs/core --save
and then import like this.
import 'jquery';
import '@popperjs/core'; // Edit here
import 'bootstrap/dist/js/bootstrap.bundle';
Now, Your error must be solved.
Solution 2: Import like this
You need to save file popper.min.js and then import like this.
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');
Now, Your error should be solved.
Solution 3: For Bootstrap 5
If You are using Bootstrap 5 users you need to install popperjs/core with the help of this command. For NPM Users.
npm install @popperjs/core --save
For Yarn Users.
yarn add @popperjs/core
Now, Import bootstrap just like this.
import 'bootstrap/dist/js/bootstrap.bundle';
Now, Your issue must be solved.
Summary
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also, Read
Thanks, it works for me.
It’s my Pleasure to Help You Eman. Thank You For Your Valuable words.