Rails Webpacker - 未捕获的类型错误：$(...).tooltip 不是函数

Question

我有一个 Rails 6 应用程序，并且资产是使用Webpack 4.39.1( Webpacker gem )编译的。

我在 webpack 中添加了JQuery 3.4.1和如下（）：Popper.jsProvidePluginconfig/webpack/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',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

我有一个javascript/packs/application.js文件，它是 webpack 的入口点。

我已将其添加Bootstrap 4.1.1并导入到application.js.

现在，我正在尝试按如下方式设置工具提示：

import "bootstrap/dist/js/bootstrap";

$( document ).ready(function() {
    $('[data-toggle="tooltip"]').tooltip({
        container: 'body',
        placement: 'auto'
    });
});

我Uncaught TypeError: $(...).tooltip is not a function在开发控制台中遇到错误。

我还检查$.fn并发现 Bootstrap JS 方法都不是 JQuery 原型的一部分。

任何帮助，将不胜感激！谢谢

Answer 1

将其添加到您的网页包中。还要安装 poper.js

npm i popper.js

在你的网页包中

    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        Popper: ['popper.js', 'default']
    }),

如果您使用 ts，请将其添加到您的typing.d.ts 中。

我也面临着同样的问题。之后请确保再次重新启动 IDE 和您的 webpack。

interface JQuery<any> {
    tooltip(params: any): any;
}