[英]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.导入 Bootstrap 和 Jquery 后,编译时会显示此错误。
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');
Popper.js is a dependency of Bootstrap 4 which is used for showing popups. Popper.js 是 Bootstrap 4 的依赖项,用于显示弹出窗口。 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所以要安装 popper.js 运行
npm install popper.js --save
It is setup as a peer dependency because some people just use the css of Bootstrap without the javascript.它被设置为对等依赖项,因为有些人只使用 Bootstrap 的 css 而没有 javascript。 jQuery and popper.js are the peer dependencies which needs to be installed separately. jQuery 和 popper.js 是对等依赖,需要单独安装。 If you require the javascript of Bootstrap you need to install jQuery and popper.js alongside Bootstrap 4.如果你需要 Bootstrap 的 javascript,你需要在 Bootstrap 4 旁边安装 jQuery 和 popper.js。
Bootstrap 5 requires "Popper.js Core ", not Popper.js. Bootstrap 5需要“Popper.js Core ”,而不是 Popper.js。 You should run this instead:你应该运行这个:
npm install @popperjs/core --save
(thanks @Kyouma for adding this in the comments) (感谢@Kyouma 在评论中添加此内容)
It's simple you can Visit this , And save the file as popper.min.js很简单,你可以访问这个,并将文件保存为 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');
I also ran into the same issue and was installing popper using the following command:-我也遇到了同样的问题,并使用以下命令安装 popper:-
npm install vue-popperjs --save
But, Then I realise I was using bootstrap 5, Which no longer supports this command.但是,然后我意识到我使用的是 bootstrap 5,它不再支持这个命令。 So The command used with bootstrap 5 for "Popperjs Core",因此,与 bootstrap 5 一起用于“Popperjs Core”的命令,
npm install @popperjs/core --save
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无需安装popper
Add the popper.js as dependency in your package.json file like this:在 package.json 文件中添加 popper.js 作为依赖项,如下所示:
{
"dependencies": {
...,
"popper.js": "1.16.1",
...,
}
}
and also add popper.js as required import before adding required bootstrap, as following:并在添加所需的引导程序之前将 popper.js 添加为所需的导入,如下所示:
require('popper.js');
require('bootstrap');
Like tomi0505 have written, you need to import bootstrap and other things like this:就像 tomi0505 写的那样,你需要像这样导入引导程序和其他东西:
import 'jquery';
import '@popperjs/core'; // Edit here
import 'bootstrap/dist/js/bootstrap.bundle';
After that it will work fine, I hope.之后它会正常工作,我希望。
Bootstrap 5需要“Popper.js Core”,你可以运行这个:
npm install @popperjs/core --save
For bootstrap 5 you are to对于引导程序 5,您将
npm users: npm @popperjs/core --save
npm 用户: npm @popperjs/core --save
for yarn users: yarn add @popperjs/core
对于纱线用户: yarn add @popperjs/core
then import bootstrap like so:然后像这样导入引导程序:
import 'bootstrap/dist/js/bootstrap.bundle';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.