带涡轮导轨的导轨 6 popper.js 未在整页加载时加载

如何解决带涡轮导轨的导轨 6 popper.js 未在整页加载时加载

我对 rails 和 webpacker 非常陌生，无法弄清楚这里发生了什么。当我从浏览器的地址栏中“完全加载”我的应用程序时，工具提示和弹出框没有被实例化，我收到如下错误：

• application.js:32 Uncaught TypeError: $(...).tooltip 不是函数

但是，当我从应用程序中加载页面时（单击导航栏中的链接），工具提示和弹出框按预期工作。此外，如果我转到 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','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"
  }
}

解决方法

试试

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