如何解决Bootstrap的Javascript无法在Rails 6 Webpacker设置中使用
开始一个新的Rails 6.0.3项目，并添加jQuery和Bootstrap。 jQuery可以正常工作，并且Bootstrap CSS似乎可以正确呈现，但是每当我尝试在浏览器JavaScript控制台中运行$.fn.tooltip.Constructor.VERSION时，都会出现错误Uncaught TypeError: Cannot read property 'tooltip' of undefined。此外，尝试添加插件（例如，引导程序选择，引导程序标签输入等）均失败。我不确定是否相关，但是添加真棒字体时我也遇到了同样的麻烦，CSS可以工作，但是Javascript不能。以下是可能相关的配置：
// package.json
{
"name": "myproject","private": true,"dependencies": {
"@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "5.2.1","bootstrap": "^4.5.2","channels": "^0.0.4","jquery": "^3.5.1","popper.js": "^1.16.1","turbolinks": "^5.2.0"
},"version": "0.1.0","devDependencies": {
"axios": "^0.20.0","cypress": "^5.1.0","webpack-dev-server": "^3.11.0"
}
}
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',new webpack.ProvidePlugin({
$: 'jquery/src/jquery',jQuery: 'jquery/src/jquery',Popper: ['popper.js','default']
})
)
module.exports = environment
// config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
// app/javascript/packs/application.js
require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")
// app/views/layouts/application.html.erb
<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<%= csrf_Meta_tags %>
<%= csp_Meta_tag %>
<%= stylesheet_link_tag 'application',media: 'all','data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application','data-turbolinks-track': 'reload' %>
<title>My Project</title>
</head>
<body>
<%= yield %>
</body>
</html>
解决方法
通过以下添加使其工作...
// config/webpack/custom.js
module.exports = {
resolve: {
alias: {
jquery: 'jquery/src/jquery'
}
}
};
...并进行更改：
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')
const webpack = require('webpack')
environment.plugins.prepend('Provide',new webpack.ProvidePlugin({
$: 'jquery/src/jquery',jQuery: 'jquery/src/jquery',Popper: ['popper.js','default']
})
)
environment.config.merge(customConfig)
module.exports = environment
// config/webpack/environment.js
require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")
import $ from "jquery"
document.addEventListener("turbolinks:load",() => {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
有助于解决问题的相关问题：$(...).tooltip is not a function rails 6 webpack
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
