CODEWITHSUNDEEP
jqueryreactjsreact-bootstrapreact-popper
Ranindu
Ranindu

Reputation: 1063

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

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

Upvotes: 91

Views: 181721

Answers (11)

Awara Amini
Awara Amini

Reputation: 592

This line helped me:

npm install @popperjs/core --save

Upvotes: 0

Burjak Yahya
Burjak Yahya

Reputation: 41

npm i [email protected]

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

Upvotes: 1

nakli_batman
nakli_batman

Reputation: 761

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

Upvotes: 5

OBI PASCAL BANJUARE
OBI PASCAL BANJUARE

Reputation: 355

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

Upvotes: 25

Asela Priyadarshana
Asela Priyadarshana

Reputation: 824

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

npm install @popperjs/core --save

Upvotes: 3

acesmndr
acesmndr

Reputation: 8525

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)

Upvotes: 244

Daud khan
Daud khan

Reputation: 2509

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

Upvotes: 3

Ramazan
Ramazan

Reputation: 383

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.

Upvotes: 6

tomi0505
tomi0505

Reputation: 31

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

Upvotes: 2

technik
technik

Reputation: 1076

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

Upvotes: 2

Ayemun Hossain Ashik
Ayemun Hossain Ashik

Reputation: 510

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

Upvotes: 5

Related Questions