Rails 6 with turbo-rails. popper.js is not loading on full page load

Question

I am very new to rails and webpacker and cannot figure out what is happening, here. When I perform a 'full load' of my app from the address bar in the browser, the tooltips and popovers are not being instantiated and I get errors like this:

• application.js:32 Uncaught TypeError: $(...).tooltip is not a function

But, when I load a page from within the app (click on link in the nav bar), the tooltips and popovers work as expected. Also, If I go to the chrome console and manually instantiate them, the tooltips and popovers begin working:

$('[data-bs-toggle="tooltip"]').tooltip();

Here are some of what I think are the pertinent configs:

packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbo from "@hotwired/turbo"
import "@hotwired/turbo-rails"
import * as ActiveStorage from "@rails/activestorage"
import "channels"



import 'bootstrap'
import '../stylesheets/application'

import "controllers"

Rails.start()

ActiveStorage.start()


document.addEventListener("turbo:load", () => {
    console.log("turbo!");


    $('[data-bs-toggle="tooltip"]').tooltip();
    $('[data-bs-toggle="popover"]').popover();

});

webpack/environment.js

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

webpack/custom.js:

    resolve: {
      alias: {
        jquery: 'jquery/src/jquery'
      }
    }
  };

layouts/application.html.erb:

    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>

package.json:

{
  "name": "deploy-dashboard",
  "private": true,
  "dependencies": {
    "@hotwired/turbo": "^7.0.0-beta.5",
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "bootstrap": "^5.0.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "stimulus": "^2.0.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

Answer 1

try

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