Rails 6 + webpack 错误：未捕获的 TypeError：$(...).popover 不是函数答案

【问题标题】：Rails 6 + webpack error: Uncaught TypeError: $(...).popover is not a functionRails 6 + webpack 错误：未捕获的 TypeError：$(...).popover 不是函数
【发布时间】：2020-10-23 07:17:48
【问题描述】：

我正在 Rails 6 中开始一个新项目，这将是我第一次使用 Webpack，我在使用 popover、tooltip、下拉菜单。

application.js:37 Uncaught TypeError: $(...).dropdown is not a 功能

environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        Rails: ['@rails/ujs']
    })
)

module.exports = environment

application.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'

require("@rails/ujs").start()
require("turbolinks").start()
require("channels")

import 'bootstrap'
import './menu-left.cleanui-custom'
import './menu-right.cleanui-custom'
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import '../stylesheets/application'


document.addEventListener("turbolinks:load", () => {
    $('[data-toggle=popover-hover]').popover({
        trigger: 'hover',
        animation: false
    });
    $("[data-toggle=tooltip]").tooltip({
        trigger: 'hover',
        animation: false
    });
});

$('.dropdown-toggle').dropdown();

错误从何而来？事实上，我仍然对 webpack 很迷茫。

【问题讨论】：

$('.dropdown-toggle').dropdown(); 此行导致错误，可能是由于未正确定位 html 元素，或者 dropdown() 函数无效（拼写/大小写不正确，或者是未加载）。我会尝试进入浏览器检查控制台并查看 $('.dropdown-toggle') 是否真的针对您期望的元素并从那里开始。
@SomeSchmo 元素在页面上。使用 sprocket 效果很好，所以我认为这是关于包含 js 的方式。
看看这个问题*.com/questions/58376431/…。它解决了我的引导下拉菜单问题。

标签： ruby-on-rails webpack popover ruby-on-rails-6

【解决方案1】：

看看我的代码/config/webpack/environment.js文件如下：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

还有/app/javascript/packs/application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("jquery");
require("bootstrap");

通过设置这些配置，我能够解决错误： Uncaught TypeError: $(…).popover is not a function

为了添加 bootstrap 4、jQuery 和 popper.js，我使用了下面的命令

yarn add bootstrap jquery popper.js

【讨论】：

【解决方案2】：

这对我有用：

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']
  })
)
environment.config.merge(
  module.exports = {
    resolve: {
      alias: {
        jquery: 'jquery/src/jquery',
      }
    }
  }
)

module.exports = environment

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
import "jquery"
import 'bootstrap'

document.addEventListener("turbolinks:load", function() {
  $(function () {
      $('[data-toggle="tooltip"]').tooltip()
      $('[data-toggle="popover"]').popover()
  })
})

【讨论】：