NPM 警告：bootstrap@4.0.0 需要 popper.js 的对等体

Question

I have follow dependency part in package.json:

"dependencies": {
    "bootstrap": "*",
    "bootstrap-datepicker": "^1.7.1",
    "bower": "^1.8.2",
    "chosen-js": "^1.8.2",
    "datatables.net-dt": "^1.10.16",
    "jQuery-QueryBuilder": "^2.4.5",
    "jquery": "^1.4",
    "jquery-tagit": "*",
    "jquery-ui-dist": "^1.12.1",
    "prismjs": "^1.8.1",
    "qtip2": "^3.0.3",
    "multi-step-modal": 
        "git+ssh://git@git.ias.su:2022/dependencies/multi-step-modal.git"
}

When I run npm update , I get:

LPS@1.0.0 /home/opshenichnikova/NetBeansProjects/lps/public
├── bootstrap@4.0.0 
├── jQuery-QueryBuilder@2.5.0 
├── multi-step-modal@1.0.0  (git+ssh://git@git.ias.su:2022/dependencies/multi-step-modal.git#2f9bc29093c9939c2ba23fa18fd22001a74040d2)
├── UNMET PEER DEPENDENCY popper.js@^1.12.9
└── prismjs@1.12.2 

npm WARN bootstrap@4.0.0 requires a peer of popper.js@^1.12.9 but none was installed.

I searched for the reason and found just this: Bootstrap 4: Uncaught ReferenceError: Popper is not defined

I know that it is just warning, but I always keep my code warning-free.

Answer 1

Popper.js is not really necessary

Bootstrap 4.0.0 release contains 2 new files bootstrap.bundle.js and bootstrap.bundle.min.js which contain Popper.js inside and you really do not need it.

bootstrap.bundle.min.js is exactly Bootstrap.js + Popper.js.

InBootstrap v4.0.0 documentation it is still mentioned that you need the file for some components

Components requiring JavaScript

• Dropdowns for displaying and positioning (also requires Popper.js )
• Tooltips and popovers for displaying and positioning (also requires Popper.js )

I have not tested it but I think it is not necessary

Solutions

You can use the NPM path 'bootstrap/dist/js/bootstrap.bundle.js'.

Or if you finally want to download Popper.js , download the version you need.

bootstrap/package.json

• Bootstrap v4.0.0 "popper.js": "^1.12.9"

• Bootstrap v4.1.1 "popper.js": "^1.14.1"

Answer 2

Bootstrap 4.0.0 requires popper, so just add "popper.js": "^1.12.9" to the package.json

For example dropdown , tooltips and popovers won't work:

https://www.codeply.com/go/CuOfa7UnUA (broken w/o popper)

Note: As of 4.1 , popper.js is only required for dropdowns, tooltips and popovers.

Answer 3

If it is saying as follows image in, then

It is asking for install popper.js for your project. So get the cmd on your project location and run the following command.

npm install popper.js --save

Then you can see as in following image.

Answer 4

Have to add "popper.js":"^require_version" into package.json under the dependencies.

Answer 5

You don't really need to install popper.js externally. Believe me, I was just installing the bootstrap, not in my working directory where I created the angular project and so encountered this issue, so you just need to install it in the project directory to avoid these issues. Mine worked 1000% every time I installed it in the proper directory/folder look at when installed in the project folder.