Bootstrap (5) Javascript 在 package.json 修订后不起作用 (Ruby on Rails 6)

Posted 2023-02-15

【中文标题】Bootstrap (5) Javascript 在 package.json 修订后不起作用 (Ruby on Rails 6)

【英文标题】：Boostrap (5) Javascript is not working after package.json revision (Ruby on Rails 6)

【发布时间】：2021-09-12 03:03:23

【问题描述】：

我试图更新我的 package.json 中的一些版本（基本上是我在 beta 中已经拥有的 Bootstrap 5 final），我做了。然后，还有一些。在某个时候，所有的引导 JS 都停止了工作。我在浏览器控制台或服务器日志中没有收到任何错误。就像点击带有'#'的链接

我广泛使用下拉菜单和模式，所以现在我完全停用了。

我知道 Bootstrap 需要 popper.js 来完成 JS 工作，并且已经检查了几次它们是否包含在 package.json 和 yarn.lock 中。我什至回滚了 10 个版本的 git，但它一直是这样。

我还检查了 application.html.erb 中的“javascript_pack_tag”。我不知道还能做什么。

package.json

  "name": "redvi",
  "private": true,
  "dependencies": 
    "@popperjs/core": "^2.9.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.0",
    "bootstrap": "^5.0.1",
    "popper": "^1.0.1",
    "stimulus": "^2.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  ,
  "version": "0.1.0",
  "devDependencies": 
    "webpack-dev-server": "^3.11.2"
  

在 application.html.erb 我已经包含：

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

虽然我有一个类似的应用程序可以使用它，但是： javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
import  Application  from "stimulus"
import  definitionsFromContext  from "stimulus/webpack-helpers"

import "controllers"
import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

按钮中的引导类等很好。这是我无法获得的 JS 交互。

我不知道我是否遗漏了另一个重要文件，如果有，请告诉我。

谢谢。

【参考方案1】：

yarn caché 的问题 + json 包中的版本更改。 出于某种原因，更新版本后，它继续与旧版本一起工作，直到很久以后我才遇到问题。我不得不从 yarn 和 node 模块中清除所有文件并回滚到以前的版本。