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

【问题标题】：How to fix this error : " Module not found :can't resolve popper.js "如何修复此错误：“找不到模块：无法解析 popper.js”
【发布时间】：2019-12-18 22:59:45
【问题描述】：

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

【问题讨论】：

当我在 import './index.css' 后添加 global.jQuery 时会发生这种情况；第 7 行：在模块主体中导入；重新排序到顶部导入/第一
如果这是浏览器环境，请执行import $ from 'jquery'; import 'bootstrap'; window.jQuery = $;
但仍然有 popper.js 错误伴侣。 :(
你在哪里以及如何导入 popper.js？
我没有添加。我尝试只安装 bootstrap 和 jquery。

标签： jquery reactjs react-bootstrap react-popper

【解决方案1】：

Popper.js 是 Bootstrap 4 的依赖项，用于显示弹出窗口。它是引导程序的对等依赖项，这意味着它是引导程序需要但在安装时不包含在自身中的东西。所以要安装 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 在 cmets 中添加此内容）

【讨论】：

很好的解释，谢谢。虽然，使用--save-dev 不是更好吗？
@JCarlos 从技术上讲，如果您的应用程序需要它来运行，它不是开发依赖项。所以 --save 在这里更有意义。
感谢您的解释，尽管我认为这不是引导程序的好例子。最好是拆分他们的包然后让js和css分开，这样会更干净
请注意 - popper.js 现在是旧版本。 bootstrap 5.x 将支持npm i @popperjs/core。上面的代码（完全正确）是最新的 v4.x。

【解决方案2】：

很简单你可以Visit this，并将文件保存为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');

【讨论】：

运行良好且无需更改 webpack。

【解决方案3】：

像这样在你的 package.json 文件中添加 popper.js 作为依赖：

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

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

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

【讨论】：

【解决方案4】：

如果您已安装：
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';

look this

【讨论】：

【解决方案5】：

就像tomi0505写的一样，需要导入bootstrap之类的东西：

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

我希望之后它会正常工作。

【讨论】：

【解决方案6】：

你可以直接导入喜欢

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

无需安装popper

【讨论】：

【解决方案7】：

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

npm install @popperjs/core --save

【讨论】：

【解决方案8】：

对于bootstrap 5，你要

npm 用户： npm @popperjs/core --save

对于纱线用户： yarn add @popperjs/core

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


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

【讨论】：