React错误：__WEBPACK_IMPORTED_MODULE_4_jquery___default（...）（...）.modal不是一个函数。

Question

我正在一个使用Bootstrap 4的React项目上工作。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

我读到了关于这个错误的文章，它说可能是因为使用了CDN和npm两种方式重复导入了jquery库。我不确定具体原因。但我也试着只用一种方法导入了jquery，但它并没有奏效。有什么建议吗？

- user7902157

Answer 1

您的导入import $ from 'jquery'在您的模块内创建了一个名为$的局部变量，然后被$('#addSupModal').modal('show')使用（而不是您想要的全局$）。

最快的解决方法是明确使用全局上下文中的jQuery $（因为您在脚本标记中引用了<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">，已经扩展了您的$.modal()）：

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

最好不要使用带有

- connexo

---

在 Stack Overflow 上读了半个小时的废话后，你挽救了我。导入 Bootstrap 是其他所有答案都缺少的。 - Traian

你是救星。我已经为这个错误苦苦挣扎了好几天。非常感谢！！！ - Abhinandan Madaan

我遇到了这个错误：Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2___default.a.cookie is not a function。我按照这个链接的方法进行操作：https://dev59.com/C1cP5IYBdhLWcg3w9-na - AnonymousUser