Ошибка реагирования: __WEBPACK_IMPORTED_MODULE_4_jquery ___ default (...) (...). Модальный не является функцией

Question

Я работаю над реактивным проектом с Bootstrap 4. Bootstrap был импортирован через CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

я хотел показать / скрыть модальный режим, если условие выполнено.Я уже импортировал jquery, также используя

npm install jquery --save

в компоненте

import $ from 'jquery'; <-to import jquery

$('#addSupModal').modal('show'); <- to show modal

, но во время выполнения, когда выполняется приведенная выше строка, она отображает ошибку типа

Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function

Я читал об этой ошибке, и она говорит, может быть, потому что jquery импортируется дважды с CDN и npm.Я не знаю точно, в чем причина.Но я также попытался импортировать jquery только из одного метода, но он не работает.Есть предложения?

Answer 1

При импорте import $ from 'jquery' создается локальная переменная с именем $ внутри вашего модуля, которая затем используется $('#addSupModal').modal('show') (вместо глобального $, который вы хотели).

Самым быстрым решением было бы явное использование jQuery $ из глобального контекста (который был расширен с помощью $.modal(), потому что вы указали это в теге сценария, когда делали <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>):

window.$('#addSupModal').modal('show')

Было бы лучше, хотя бы вообще не включать jQuery и плагины с тегами скрипта, потому что таким образом вы создаете неявные зависимости (то есть ваш модуль не может работать без этих script тегов).Вместо этого также импортируйте Bootstrap:

import $ from 'jquery'; <-to import jquery
import 'bootstrap';

$('#addSupModal').modal('show'); // <- to show modal