Как исправить эту ошибку: "Модуль не найден: не удается разрешить 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, которая используется для отображения всплывающих окон. Это взаимозависимость от начальной загрузки, означающая, что это то, что требуется для начальной загрузки, но не включается в себя при установке. Так что для установки popper.js запустите

npm install popper.js --save

Он настроен как одноранговая зависимость, потому что некоторые люди просто используют CSS Bootstrap без javascript. jQuery и popper.js - это одноранговые зависимости, которые нужно устанавливать отдельно. Если вам требуется javascript Bootstrap, вам нужно установить jQuery и popper.js вместе с Bootstrap 4.

Answer 2

Для начальной загрузки 5 вы должны

пользователи нпм: npm install @popperjs/core --save

для пользователей пряжи: yarn add @popperjs/core

затем импортируйте бутстрап так:

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

Answer 3

Я также столкнулся с той же проблемой и устанавливал поппер, используя следующую команду: -

      npm install vue-popperjs --save

Но потом я понимаю, что использовал загрузчик 5, который больше не поддерживает эту команду. Итак, команда, используемая с начальной загрузкой 5 для «Popperjs Core»,

      npm install @popperjs/core --save

Answer 4

Как написал tomi0505, вам нужно импортировать бутстрап и другие подобные вещи:

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

Надеюсь, после этого все заработает.

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

Answer 6

Вы можете напрямую импортировать, например

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

не нужно устанавливать поппер

Answer 7

Для Bootstrap 5 требуется «ядро Popper.js». Вместо этого вы можете запустить это:

      npm install @popperjs/core --save

Answer 8

Добавьте popper.js в качестве зависимости в файл package.json следующим образом:

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

а также добавьте popper.js в качестве необходимого импорта перед добавлением требуемой начальной загрузки, как показано ниже:

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

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 bootstrap@4.6.2

этот код в лучшем решении. потому что в этой версии бутстрап использует поппер отдельно.