How to fix this error : " Module not found :can't resolve 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，您需要安装 jQuery 和 popper.js 以及 Bootstrap 4.

Bootstrap 5 需要“Popper.js Core”，而不是 Popper.js。您应该运行改为：

npm install @popperjs/core --save

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

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

Answer 3

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

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

并且在添加required bootstrap之前添加popper.js as required import，如下：

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

Answer 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

Answer 5

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

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

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

Answer 6

你可以直接导入like

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

无需安装popper

Answer 7

Bootstrap 5 需要“Popper.js 核心”，您可以运行改为：

npm install @popperjs/core --save

Answer 8

对于bootstrap 5你要

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

纱线用户： yarn add @popperjs/core

然后像这样导入 bootstrap：


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

Answer 9

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

npm install vue-popperjs --save

但是，后来我发现我用的是bootstrap5，已经不支持这个命令了。所以与 bootstrap 5 一起用于“Popperjs Core”的命令，

npm install @popperjs/core --save

How to fix this error : " Module not found :can't resolve popper.js "

How to fix this error : " Module not found :can't resolve popper.js "

jquery

reactjs

react-bootstrap

react-popper