$(…).tooltip is not a function rails 6 webpack

Question

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

Answer 1

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

Answer 2

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

https://github.com/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