如何修复此错误:“找不到module:无法解析 popper.js”

IT技术 jquery reactjs react-bootstrap react-popper
2021-04-29 08:31:56

导入 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');
4个回答

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 在评论中添加此内容)

很简单,你可以访问这个,并将文件保存为 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');

您可以直接导入

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

无需安装popper

在 package.json 文件中添加 popper.js 作为依赖项,如下所示:

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

并在添加所需的引导程序之前将 popper.js 添加为所需的导入,如下所示:

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