Rails Webpacker - Uncaught TypeError: $(...).tooltip is not a function

Question

I have a Rails 6 application and assets are compiled using Webpack 4.39.1 (Webpacker gem) .

I have added JQuery 3.4.1 and Popper.js to webpack ProvidePlugin as follows (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;

I have a javascript/packs/application.js file and it is the entry point for webpack.

I have added Bootstrap 4.1.1 and importing it to application.js.

Now, I'm trying to setup a tooltip as follows:

import "bootstrap/dist/js/bootstrap";

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

I am getting Uncaught TypeError: $(...).tooltip is not a function error in dev console.

I also checked $.fn and found none of the Bootstrap JS methods are part of JQuery prototype.

Any help would be appreciated! Thanks

yes, this is not working in development. I have restarted both puma and `webpack-dev-server` — dp7, Sep 26 '19 at 13:34
You may need to import the tooltip. Add `import "bootstrap/js/dist/tooltip";` to application.js — demir, Sep 26 '19 at 13:48
Or remove all js you have imported about bootsrap in application.js, add only: `import "bootstrap";` — demir, Sep 26 '19 at 13:54
@Sivan yes. Check this https://stackoverflow.com/questions/60470917/tooltip-is-not-a-function-rails-6-webpack — prasannaboga, Jun 05 '20 at 13:01

Tony Ngo · Answer 1 · 2019-10-01T11:02:21.523

0

Add this to your webpack. Also install poper.js too

npm i popper.js

In your webpack

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

If you using ts add this in your typing.d.ts.

I'm also facing this same issue. After that to be sure restart IDE and your webpack again.

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

edited Oct 01 '19 at 11:02

answered Sep 27 '19 at 06:43

Tony Ngo

19,166
4
38
60

Have you fixed this issue with vanilla js ? I am not sure where to place this `typing.d.ts.` in a Rails - Webpacker setup. – dp7 Sep 28 '19 at 12:51
Is that an acceptable answer? I'm struggling with "$ is not a function" error on Chrome console and not sure how to fix that. – Askar Hussain Jan 17 '20 at 01:31
1

@AskarHussain you can try with my answer or https://stackoverflow.com/questions/56941924/angular-8-using-jquery/56944859#56944859 – Tony Ngo Jan 17 '20 at 02:57

score 0 · Answer 2 · answered Feb 22 '21 at 14:57

0

You can solve this by adding to your gemfile 'jquery-ui-rails' and 'jquery-ui-themes' Others have solved it by using import("bootstrap") in application.js

answered Feb 22 '21 at 14:57

Mices

89
3
9

Rails Webpacker - Uncaught TypeError: $(...).tooltip is not a function

2 Answers2