React 错误：__WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal 不是一个函数
2018-09-23
18064
我正在使用 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>
我想要的是，如果满足条件，则显示/隐藏模式。我已经使用
npm install jquery --save
在组件
import $ from 'jquery'; <-to import jquery
$('#addSupModal').modal('show'); <- to show modal
中导入了 jquery，但在执行上述行时，它会显示类似
Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function
的错误我读过这个错误，它说可能是因为 jquery 使用 CDN 和 npm 导入了两次。我不确定是什么原因。但我也尝试过只从一种方法导入 jquery，但它不起作用。有什么建议吗？
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
connexo
2018-09-23