Question

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

我已将JQuery 3.4.1和Popper.js添加到webpack ProvidePlugin中，如下所示（config/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

将此添加到您的Webpack。也要安装poper.js

npm i popper.js

在您的Webpack中

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

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

我也面临着同样的问题。之后，请确保重新启动IDE和Webpack。

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

Answer 2

您可以通过添加到您的 gemfile 'jquery-ui-rails' 和 'jquery-ui-themes' 来解决这个问题，其他人已经通过在 application.js 中使用 import("bootstrap") 解决了这个问题

Rails Webpacker-未捕获的TypeError：$（...）。tooltip不是函数

2 个答案: