How to fix this error : " Module not found :can't resolve popper.js "

Question

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');

this will happen when i add global.jQuery in after import './index.css'; Line 7: Import in body of module; reorder to top import/first — Ranindu, Aug 12 '19 at 11:05
If this is a browser env, do `import $ from 'jquery'; import 'bootstrap'; window.jQuery = $;` — Clarity, Aug 12 '19 at 11:07
I guess it's just a warning as it's the dependency of Bootstrap. Are you using any pop up components in your project? — acesmndr, Aug 12 '19 at 11:20
If it's used you could just resolve it by doing ```npm -i popper.js``` — acesmndr, Aug 12 '19 at 11:21
no i am not using pop up components. How to import popper.js when it install? — Ranindu, Aug 12 '19 at 11:23
It is something bootstrap uses for showing tooltips. The resolution to your problem is here: https://stackoverflow.com/questions/47039812/how-to-install-popper-js-with-bootstrap-4 — acesmndr, Aug 12 '19 at 11:25

score 228 · Accepted Answer · edited Jun 10 '21 at 04:18

228

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)

edited Jun 10 '21 at 04:18

LuizLoyola

386
3
20

answered Aug 12 '19 at 11:29

acesmndr

8,137
3
23
28

Nice explanation, thanks. Although, wouldn't it be preferable to use `--save-dev`? – JCarlosR Dec 19 '19 at 23:45
2

@JCarlos It's not technically a dev dependency if it is required for your application to run. So --save makes more sense here. – acesmndr Dec 20 '19 at 04:05
thanks for the explanation, although I think it is not a nice example by bootstrap. better would be to split their package then to have js and css seperate, this would be much cleaner – Norman M Oct 18 '20 at 22:43
27

Just a note - popper.js is now a legacy version. bootstrap 5.x will support `npm i @popperjs/core` instead. The above code (completely correct) is current through v4.x. – Kyouma Apr 08 '21 at 16:39
Thanks a bunch. Popper.js Core instead of Popper.js, it's solved – Thang Nguyen Mar 04 '22 at 02:28
Interesting that it's only my Windows machine that shows this compile error! No worries on my Mac: Bootstrap 5 and no popper. – redevill Feb 03 '23 at 00:09

score 23 · Answer 2 · edited Jan 28 '22 at 17:41

23

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';

edited Jan 28 '22 at 17:41

mimic

4,897
7
54
93

answered Jan 10 '22 at 13:39

OBI PASCAL BANJUARE

315
2
8

Worked for me with Rails 7 esbuild, Stimulus and yarn. No React. How do people figure out how to fix these problems? Thank you – Greg Mar 31 '23 at 21:28

score 5 · Answer 3 · answered Apr 22 '20 at 17:30

5

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');

answered Apr 22 '20 at 17:30

Ayemun Hossain Ashik

470
6
13

1

Works great and without change webpack. – Enrique Flores Sep 06 '20 at 04:43

score 5 · Answer 4 · answered Jan 03 '21 at 14:53

5

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.

answered Jan 03 '21 at 14:53

Ramazan

273
3
7

score 5 · Answer 5 · answered Mar 19 '22 at 07:20

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

score 3 · Answer 6 · answered May 10 '21 at 15:29

3

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

answered May 10 '21 at 15:29

Daud khan

2,413
2
14
18

score 2 · Answer 7 · answered Sep 10 '20 at 07:19

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');

score 2 · Answer 8 · answered Nov 13 '21 at 14:33

2

Bootstrap 5 requires "Popper.js Core", You Can run this instead:

npm install @popperjs/core --save

answered Nov 13 '21 at 14:33

Asela Priyadarshana

740
5
20

score 1 · Answer 9 · answered Dec 19 '20 at 15:00

1

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

answered Dec 19 '20 at 15:00

tomi0505

21
1

score 1 · Answer 10 · answered Aug 28 '23 at 15:14

1

npm i bootstrap@4.6.2

this code in the best solution. because bootstrap use popper in this version separately.

answered Aug 28 '23 at 15:14

Burjak Yahya

31
2

How to fix this error : " Module not found :can't resolve popper.js "

10 Answers10

Linked