How to fix this error : " Module not found :can't resolve popper.js "
JqueryReactjsReact BootstrapReact PopperJquery Problem Overview
After import the Bootstrap and Jquery this error is showning when compiling.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
global.jQuery = require('jquery');
require('bootstrap');
Jquery Solutions
Solution 1 - Jquery
Popper.js is a dependency of Bootstrap 4 which is used for showing popups. It is a peer dependency of bootstrap meaning it is something that bootstrap requires but doesn't include with itself when installed. So to install popper.js run
npm install popper.js --save
It is setup as a peer dependency because some people just use the css of Bootstrap without the javascript. jQuery and popper.js are the peer dependencies which needs to be installed separately. If you require the javascript of Bootstrap you need to install jQuery and popper.js alongside Bootstrap 4.
Bootstrap 5 requires "Popper.js Core", not Popper.js. You should run this instead:
npm install @popperjs/core --save
(thanks @Kyouma for adding this in the comments)
Solution 2 - Jquery
For bootstrap 5 you are to
npm users:
npm install @popperjs/core --save
for yarn users:
yarn add @popperjs/core
then import bootstrap like so:
import 'bootstrap/dist/js/bootstrap.bundle';
Solution 3 - Jquery
It's simple you can Visit this, And save the file as popper.min.js
then import it.
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');
Solution 4 - Jquery
Like tomi0505 have written, you need to import bootstrap and other things like this:
import 'jquery';
import '@popperjs/core'; // Edit here
import 'bootstrap/dist/js/bootstrap.bundle';
After that it will work fine, I hope.
Solution 5 - Jquery
You can direct import like
import bootstrapBundle from './../path to node modules/../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
no need to install popper
Solution 6 - Jquery
Add the popper.js as dependency in your package.json file like this:
{
"dependencies": {
...,
"popper.js": "1.16.1",
...,
}
}
and also add popper.js as required import before adding required bootstrap, as following:
require('popper.js');
require('bootstrap');
Solution 7 - Jquery
if you have installed:
npm install jquery popper.js
instead:
global.jQuery = require('jquery');
require('bootstrap');
add:
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
look this
Solution 8 - Jquery
Bootstrap 5 requires "Popper.js Core", You Can run this instead:
npm install @popperjs/core --save
Solution 9 - Jquery
I also ran into the same issue and was installing popper using the following command :-
npm install vue-popperjs --save
But, Then I realise I was using bootstrap 5, Which no longer supports this command. So The command used with bootstrap 5 for "Popperjs Core",
npm install @popperjs/core --save