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

Question

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

5

我有一个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 原型的一部分。

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

- dp7

是的，在开发中这个有问题。我已经重新启动了 Puma 和 webpack-dev-server。 - dp7

你可能需要导入工具提示。将 import "bootstrap/js/dist/tooltip"; 添加到 application.js。 - demir

请删除应用程序中导入的所有关于Bootstrap的JS，仅添加以下内容：import "bootstrap";。 - demir

@demir：尝试了所有方法，仍然没有运气！ - dp7

@dp7，你解决了这个问题吗？ - prasannaboga

显示剩余4条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mices · Answer 1

你可以通过在Gemfile中添加'jquery-ui-rails'和'jquery-ui-themes'来解决这个问题。其他人则通过在application.js中使用import("bootstrap")来解决它。

- Tony Ngo · Answer 2

将此添加到您的webpack中。还要安装poper.js。

npm i popper.js

在你的webpack中

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

如果您正在使用ts，请在typing.d.ts中添加此内容。

我也遇到了同样的问题。之后为了确保，请重新启动IDE和webpack。

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