I have tried changing the versions of bootstrap, jquery, and popper but no luck. I don't think I am using more than one version of jquery. Not sure where it went wrong. It would be great if someone helps me to find what I am missing.

Here is my list of files,

package.json:

{
  "name": "kf",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "sweetalert2": "^9.8.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

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;

application.js

require('@rails/ujs').start();
require('jquery/dist/jquery');
require('popper.js/dist/umd/popper');
require('bootstrap/dist/js/bootstrap');
require('@fortawesome/fontawesome-free');
require('./owl.carousel.min');
require('./fastclick');
require('./custom-script');
require('./return-to-top');

const Swal = require('sweetalert2');
window.Swal = Swal;
const images = require.context('../images', true);
const imagePath = name => images(name, true);
import 'stylesheets/application';

jQuery(document).ready(function($) {
  $('[data-toggle="tooltip"]').tooltip();
});

Warning:

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function

Error:

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

I have tried changing the versions of bootstrap, jquery, and popper but no luck. I don't think I am using more than one version of jquery. Not sure where it went wrong. It would be great if someone helps me to find what I am missing.

Here is my list of files,

package.json:

{
  "name": "kf",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "sweetalert2": "^9.8.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

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;

application.js

require('@rails/ujs').start();
require('jquery/dist/jquery');
require('popper.js/dist/umd/popper');
require('bootstrap/dist/js/bootstrap');
require('@fortawesome/fontawesome-free');
require('./owl.carousel.min');
require('./fastclick');
require('./custom-script');
require('./return-to-top');

const Swal = require('sweetalert2');
window.Swal = Swal;
const images = require.context('../images', true);
const imagePath = name => images(name, true);
import 'stylesheets/application';

jQuery(document).ready(function($) {
  $('[data-toggle="tooltip"]').tooltip();
});

Warning:

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function

Error:

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

• javascript
• jquery
• webpack
• bootstrap-4
• ruby-on-rails-6

• Could it be a missing require for popper.js in application.js? – stackoverflowusrone Commented Mar 1, 2020 at 8:50
• Like github./twbs/bootstrap/issues/23381#issuement-322179061 – stackoverflowusrone Commented Mar 1, 2020 at 8:55
• I have tried that but the same result now. :-( – Sri Commented Mar 1, 2020 at 10:14

4 Answers 4

I have resolved by adding a custom.js in the webpack folder like in the webpack configuration git document:

https://github./rails/webpacker/blob/master/docs/webpack.md#configuration

#config/webpack/custom.js

module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
};

And my config/webpack/environment.js changed to

const { environment } = require('@rails/webpacker');
const customConfig = require('./custom');
const webpack = require('webpack');

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
);
environment.config.merge(customConfig);

module.exports = environment;

Restart the server and the tooltip is working fine.

Note: You don't need to add the require('jquery'), require('popper') in the application.js

I think your webpack config should be like this

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

Let me know if you still have any errors

@Sri's answer worked for me. I just wanted to add that I needed this in application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require('jquery')
require('popper.js')

window.$ = window.jQuery = require("jquery");
import "bootstrap/dist/js/bootstrap.bundle.js"

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="popover"]').popover()
})

And this in the view:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

The underlying issue is that tooltip() has not always existed in jQuery UI. It was added in version 1.9. Proof:

version added: 1.9 (Source: API.jQueryUI.: Tooltip Widget.)

If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().

Don't forget, by upgrading your jQuery/jQuery UI version, you may also introduce other errors, for instance, “Uncaught TypeError: a.indexOf is not a function”, but these are fixed easily just by searching for the solutions to each and fixing them. This is the general procedure in upgrading any package you use, sometimes things break, but they are always fixable. Using up-to-date code is your best ally in package management.