Rails 6 与 turbo-rails。 popper.js 未在整页加载时加载

Question

我是 rails 和 webpacker 的新手，不知道这里发生了什么。当我从浏览器的地址栏执行我的应用程序的 'full load' 时，工具提示和弹出窗口没有被实例化，我得到这样的错误：

application.js:32 未捕获类型错误：$(...).tooltip 不是函数

但是，当我从应用程序中加载页面时（单击导航栏中的 link），工具提示和弹出窗口按预期工作。此外，如果我转到 chrome 控制台并手动实例化它们，工具提示和弹出窗口将开始工作：

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

以下是一些我认为相关的配置：

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

尝试

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

Rails 6 与 turbo-rails。 popper.js 未在整页加载时加载

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

ruby-on-rails

turbolinks

hotwire-rails

turbo-rails