如何修复此错误：“找不到模块：无法解析 popper.js”

Question

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

Answer 1

Popper.js 是 Bootstrap 4 的依赖项，用于显示弹出窗口。它是 bootstrap 的对等依赖项，这意味着它是 bootstrap 需要的东西，但在安装时不包含在其自身中。 所以要安装 popper.js 运行

npm install popper.js --save

它被设置为对等依赖项，因为有些人只使用 Bootstrap 的 css 而没有使用 javascript。 jQuery 和 popper.js 是对等依赖项，需要单独安装。如果您需要 Bootstrap 的 javascript，则需要与 Bootstrap 4 一起安装 jQuery 和 popper.js。

---

Bootstrap 5 需要“Popper.js Core”，而不是 Popper.js。你应该运行这个：

npm install @popperjs/core --save

（感谢@Kyouma 在评论中添加此内容）

Answer 2

对于 bootstrap 5 你需要

npm 用户：

npm install @popperjs/core --save

对于纱线用户：

yarn add @popperjs/core

然后像这样导入引导程序：

import 'bootstrap/dist/js/bootstrap.bundle';

Answer 3

很简单你可以访问这个，并将文件另存为popper.min.js

然后导入它。

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

Answer 4

就像tomi0505所写的，你需要导入bootstrap和其他类似的东西：

import 'jquery';
import '@popperjs/core'; // Edit here
import 'bootstrap/dist/js/bootstrap.bundle';

之后它会工作得很好，我希望。

Answer 5

我也遇到了同样的问题，并使用以下命令安装 popper :-

npm install vue-popperjs --save

但是，然后我意识到我使用的是 bootstrap 5，它不再支持这个命令。 所以与 Bootstrap 5 一起使用的命令用于“Popperjs Core”，

npm install @popperjs/core --save

Answer 6

您可以像这样直接导入

import bootstrapBundle from './../path to node modules/../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

无需安装popper

Answer 7

将 popper.js 添加为 package.json 文件中的依赖项，如下所示：

{
  "dependencies": {
    ...,
    "popper.js": "1.16.1",
    ...,
  }
}

并在添加所需的引导程序之前添加 popper.js 作为所需的导入，如下所示：

require('popper.js');
require('bootstrap');

Answer 8

Bootstrap 5 需要“Popper.js Core”，您可以运行它：

npm install @popperjs/core --save

Answer 9

如果您已安装：

npm install jquery popper.js

相反：

global.jQuery = require('jquery');

require('bootstrap');

添加：

import $ from 'jquery';

import Popper from 'popper.js';

import 'bootstrap/dist/js/bootstrap.bundle.min';

看这个

Answer 10

npm i [email protected]

此代码是最佳解决方案。因为bootstrap在这个版本中单独使用了popper。

Answer 11

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试。测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测