Рельсы 6 с турбонаддувом. popper.js не загружается при полной загрузке страницы

Question

Я новичок в rails и webpacker и не могу понять, что здесь происходит. Когда я выполняю «полную загрузку» своего приложения из адресной строки в браузере, всплывающие подсказки и всплывающие окна не создаются, и я получаю такие ошибки:

• application.js:32 Uncaught TypeError: $(...). всплывающая подсказка не является функцией

Но когда я загружаю страницу из приложения (щелкаю ссылку на панели навигации), всплывающие подсказки и всплывающие подсказки работают должным образом. Кроме того, если я перейду на хромированную консоль и вручную создаю их экземпляры, всплывающие подсказки и всплывающие окна начнут работать:

$('[данные-bs-toggle="подсказка"]'). подсказка ();

Вот некоторые из подходящих конфигураций:

пакеты / 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'
      }
    }
  };

макеты / 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

пытаться

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