title: $(...).tooltip is not a function rails 6 webpack
body: <p>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. </p>
  
  <p>Here is my list of files,</p>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p><strong>config/webpack/environment.js</strong></p>
  
  <pre><code>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;
  </code></pre>
  
  <p><strong>application.js</strong></p>
  
  <pre><code>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 =&gt; images(name, true);
  import 'stylesheets/application';
  
  jQuery(document).ready(function($) {
    $('[data-toggle="tooltip"]').tooltip();
  });
  </code></pre>
  
  <p><strong>Warning:</strong></p>
  
  <pre><code>jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>Uncaught TypeError: $(...).tooltip is not a function
  </code></pre>