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

Question

Started a new Rails 6.0.3 project and added jQuery and Bootstrap.启动了一个新的 Rails 6.0.3 项目并添加了 jQuery 和 Bootstrap。 jQuery works fine and the Bootstrap CSS seems to render properly but whenever I try running $.fn.tooltip.Constructor.VERSION in the browser javascript console I get an error Uncaught TypeError: Cannot read property 'tooltip' of undefined . jQuery 工作正常并且 Bootstrap CSS 似乎可以正确呈现，但是每当我尝试在浏览器 javascript 控制台中运行$.fn.tooltip.Constructor.VERSION ，我都会收到错误Uncaught TypeError: Cannot read property 'tooltip' of undefined 。 Also trying to add plugins like bootstrap-select, Bootstrap Tags Input, etc. all fail.同样尝试添加插件，如 bootstrap-select、Bootstrap Tags Input 等，都失败了。 I'm not sure if it's related but I've also had the same trouble adding awesome-fonts, the CSS works but Javascript does not.我不确定它是否相关，但我在添加很棒的字体时也遇到了同样的问题，CSS 有效但 Javascript 无效。 Below are configs that might be relevant:以下是可能相关的配置：

// 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

Got it working through the following addition...通过以下添加让它工作......

// config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
};

... and changes: ...和变化：

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

Related question that was helpful in getting to a solution: $(...).tooltip is not a function rails 6 webpack有助于获得解决方案的相关问题： $(...).tooltip is not a function rails 6 webpack

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-29 04:55:52

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-29 04:55:52

解决方案1
1 已采纳 2020-09-29 04:55:52