Bootstrap 的 Javascript 在 Rails 6 webpacker 设置中不工作

Question

启动了一个新的 Rails 6.0.3 项目并添加了 jQuery 和 Bootstrap。 jQuery 工作正常并且 Bootstrap CSS 似乎可以正确呈现，但是每当我在浏览器 javascript 控制台中尝试运行 $.fn.tooltip.Constructor.VERSION 时，我都会收到错误消息Uncaught TypeError: Cannot read property 'tooltip' of undefined。还尝试添加 bootstrap-select、Bootstrap 标签输入等插件，但都失败了。我不确定它是否相关，但我在添加 awesome-fonts 时也遇到了同样的问题，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>

Answer 1

通过以下添加使其工作...

// 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()
})

有助于找到解决方案的相关问题：

Bootstrap 的 Javascript 在 Rails 6 webpacker 设置中不工作

Bootstrap's Javascript not working in Rails 6 webpacker setup

javascript

ruby-on-rails

bootstrap-4

webpacker