logo标签列表

如何修复这个错误："模块未找到：无法解析popper.js"

jqueryreactjsreact-bootstrapreact-popper
86

导入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');
1
当我在import './index.css'之后添加global.jQuery时，这将发生。第7行：模块主体中的导入；重新排序到顶部import/first。 - Ranindu
如果这是浏览器环境，请执行以下操作：import $ from 'jquery'; import 'bootstrap'; window.jQuery = $; - Clarity
你是在哪里以及如何导入popper.js的？ - Clarity
我没有添加任何东西。我只尝试安装Bootstrap和jQuery。 - Ranindu
我猜这只是一个警告，因为它是Bootstrap的依赖项。你在项目中使用任何弹出组件吗？ - acesmndr
显示剩余4条评论
10个回答
232

Popper.js 是 Bootstrap 4 的依赖项，用于显示弹出框。它是 bootstrap 的同行依赖项，这意味着当安装 bootstrap 时，它是 bootstrap 需要但不包含在内的东西。 因此，要安装 popper.js，请运行

npm install popper.js --save

由于一些人只使用Bootstrap的CSS而不是JavaScript，因此它被设置为对等依赖项。jQuery和popper.js是需要单独安装的对等依赖项。如果您需要Bootstrap的JavaScript，则需要同时安装jQuery和popper.js和Bootstrap 4。

Bootstrap 5需要" Popper.js Core"而不是Popper.js。您应该运行以下命令：

npm install @popperjs/core --save
感谢@Kyouma在评论中添加此内容。
很好的解释，谢谢。不过，使用--save-dev会更好吧？ - JCarlosR
2
@JCarlos 如果某个软件包是必须的，应用程序才能运行，那么技术上它就不是一个“dev dependency”。因此，在这种情况下使用“--save” 更有意义。 - acesmndr
感谢您的解释，尽管我认为Bootstrap的示例不是很好。最好的做法是将其包分开，然后将JS和CSS分离，这样会更清晰。 - Norman M
27
请注意 - popper.js 现已成为遗留版本。bootstrap 5.x 将支持使用 npm i @popperjs/core。上述代码（完全正确）适用于 v4.x。 - Kyouma
非常感谢。使用 Popper.js 核心代替 Popper.js，问题已解决。 - Thang Nguyen
有趣的是只有我的Windows机器显示这个编译错误！在我的Mac上没有问题：Bootstrap 5和没有popper。 - redevill
23

对于Bootstrap 5，您需要进行以下操作：

如果您使用npm： npm install @popperjs/core --save

如果您使用yarn： yarn add @popperjs/core

然后像这样导入Bootstrap：


import 'bootstrap/dist/js/bootstrap.bundle';
在 Rails 7 esbuild、Stimulus 和 yarn 中对我有效。没有 React。人们是如何找出解决这些问题的呢？谢谢。 - Greg
5
我也遇到了同样的问题，并使用以下命令安装了 popper:-
npm install vue-popperjs --save

但是，后来我意识到我在使用Bootstrap 5，它不再支持此命令。 因此，在Bootstrap 5中，应使用以下命令来使用"Popperjs Core"：

npm install @popperjs/core --save
5

就像tomi0505所写的那样，您需要导入Bootstrap和其他类似的东西：

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

之后它应该就能正常工作了，希望如此。

5

很简单，你可以访问这里，然后将文件保存为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');
1
运行良好，无需更改webpack。 - Enrique Flores
3
您可以直接导入，例如：
import bootstrapBundle from './../path to node modules/../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

无需安装 popper。

2

Bootstrap 5需要"Popper.js Core"，您可以使用以下方式运行：

npm install @popperjs/core --save
2

将popper.js作为依赖项添加到您的package.json文件中，格式如下：

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

在添加所需的bootstrap之前，还需要添加popper.js作为必需的导入项，如下所示：

require('popper.js');
require('bootstrap');
1
如果您已经安装：
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';

点击这里查看
1
npm i bootstrap@4.6.2

这段代码是最佳解决方案。因为在这个版本中，Bootstrap单独使用了Popper。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接