在我的 Rails 5 应用程序中，如果我使用标头加载 Bootstrap 4<script>来自 CDN 的标签，一切正常。但是当我安装 Bootstrap （及其依赖项）时node_modules，并使用 Webpack 提供服务，它大部分仍然有效...但是 jQuery 方法 Bootstrap 应该添加如下$(foo).modal() or $(bar).popover()在 JavaScript 控制台中给出错误：
Uncaught TypeError: $(...).modal is not a function
Uncaught TypeError: $(...).popover is not a function
StackOverflow 还有其他几个关于此类错误的问题，但其中列出的解决方案都不适合我。最常见的原因似乎是 jQuery 被包含两次，但我很确定我没有这样做；当我删除 jQuery 时import from app/javascript/packs/application.js（见下文），然后所有 jQuery 都会停止工作。 jQuery 不在我的Gemfile作为 gem，单词“jquery”仅出现在我下面显示的文件中。
我正在以正确的顺序加载（见下文；jQuery 和 Popper 在 Bootstrap 之前）。我在方法调用周围使用了文档就绪的包装器（见下文），因此我不会太早调用它们。 Bootstrap CSS 加载良好，并且 DOM 元素使用data-toggle="modal"正确显示模态：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Show Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!- ... ->
</div>
</div>
</div>
...只有当像这样的方法时$(foo).modal()等在JS代码中调用我收到错误：
<script>
$(function () {
$('#exampleModal').on('shown.bs.modal', function (e) {
console.log('modal shown!');
});
$('#otherModalButton').click(function (e) {
e.preventDefault();
console.log('clicked!');
$('#exampleModal').modal('show'); // <- "not a function" error
return false;
});
});
</script>
我的设置：
Node.js v10.20.1
ruby 2.5.8p224 (2020-03-31 revision 67882) [x86_64-linux]
Rails 5.2.4.2
package.json: "@rails/webpacker": "4.2.2",
package.json: "bootstrap": "4.4.1",
package.json: "jquery": "3.4.1",
package.json: "popper.js": "1.16.1"
package.json: "webpack-dev-server": "^3.11.0"
// config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery', // taking this out doesn't fix it
Popper: ['popper.js', 'default']
})
)
module.exports = environment
<!DOCTYPE html>
<!-- app/views/layouts/application.html.erb -->
<html>
<head>
[...]
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_pack_tag 'application' %>
<%# if I load with these two lines (instead of in app/javascript/packs/application.js), it all works: %>
<%# javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js' %>
<%# javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js' %>
</head>
<body>
<%= yield %>
</body>
</html>
// app/javascript/packs/application.js
import 'jquery/src/jquery'
import 'popper.js/dist/esm/popper'
import 'bootstrap/dist/js/bootstrap'
import '../stylesheets/application'
// app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
我已经手动查看了 JS 包webpack-dev-server正在生产；我可以在那里看到 Bootstrap。控制台中的 Webpack 输出显示包已成功编译，没有错误。我已经在 Chrome（ChromeOS 和 MacOS）和 Firefox（MacOS）上尝试过此操作。
我可以尝试什么想法吗？
