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

【问题标题】：Rails Webpacker - Uncaught TypeError: $(...).tooltip is not a functionRails Webpacker - 未捕获的类型错误：$(...).tooltip 不是函数
【发布时间】：2020-01-26 17:45:10
【问题描述】：

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

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

【问题讨论】：

您是否重新启动了应用程序？
是的，这在开发中不起作用。我已经重启了 puma 和 webpack-dev-server
您可能需要导入工具提示。在 application.js 中添加import "bootstrap/js/dist/tooltip";
或者把你在application.js中导入的关于bootsrap的所有js都去掉，只添加：import "bootstrap";
@demir : 什么都试过了，还是不行！

标签： javascript ruby-on-rails node.js webpack

【解决方案1】：

将此添加到您的 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;
}

【讨论】：

你用 vanilla js 解决了这个问题吗？我不确定在 Rails - Webpacker 设置中将此 typing.d.ts. 放在哪里。
这是一个可以接受的答案吗？我在 Chrome 控制台上遇到“$ 不是函数”错误，不知道如何解决。
@AskarHussain 你可以试试我的回答或stackoverflow.com/questions/56941924/angular-8-using-jquery/…

【解决方案2】：

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

【讨论】：