Rails 7集成Bootstrap 5后出现@popperjs/core路由错误求助

架构老林

2026-7-1

问题

刚安装了Rails 7和Bootstrap 5，应用可正常启动，但日志中出现大量ActionController::RoutingError错误，提示无法匹配/popper.js、各类modifiers及dom-utils等资源的GET请求。具体日志信息如下：

Started GET "/home/index" for 127.0.0.1 at 2024-02-02 16:01:31 -0500
  ActiveRecord::SchemaMigration Load (0.1ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by HomeController#index as HTML
  Rendering layout layouts/application.html.erb
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (Duration: 0.4ms | Allocations: 363)
  Rendered layout layouts/application.html.erb (Duration: 115.3ms | Allocations: 46785)
Completed 200 OK in 122ms (Views: 117.3ms | ActiveRecord: 0.0ms | Allocations: 50875)



ActionController::RoutingError (No route matches [GET] "/assets/enums.js"):

Started GET "/_/a0ba12d2.js" for 127.0.0.1 at 2024-02-02 16:01:31 -0500

ActionController::RoutingError (No route matches [GET] "/assets/modifiers/index.js"):


ActionController::RoutingError (No route matches [GET] "/assets/popper.js"):


ActionController::RoutingError (No route matches [GET] "/_/a0ba12d2.js"):


ActionController::RoutingError (No route matches [GET] "/assets/popper-lite.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/applyStyles.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/computeStyles.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/arrow.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/eventListeners.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/flip.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/hide.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/offset.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/popperOffsets.js"):


ActionController::RoutingError (No route matches [GET] "/assets/modifiers/preventOverflow.js"):

Started GET "/_/7a91f8b9.js" for 127.0.0.1 at 2024-02-02 16:01:32 -0500

ActionController::RoutingError (No route matches [GET] "/_/7a91f8b9.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getCompositeRect.js"):

Started GET "/_/7742d4ca.js" for 127.0.0.1 at 2024-02-02 16:01:32 -0500

ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getWindow.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/instanceOf.js"):


ActionController::RoutingError (No route matches [GET] "/_/7742d4ca.js"):

Started GET "/_/b8df2d1e.js" for 127.0.0.1 at 2024-02-02 16:01:32 -0500

ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getNodeScroll.js"):


ActionController::RoutingError (No route matches [GET] "/_/b8df2d1e.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getWindowScroll.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getHTMLElementScroll.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getNodeName.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getWindowScrollBarX.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getLayoutRect.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/isScrollParent.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getDocumentElement.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getComputedStyle.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getParentNode.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/listScrollParents.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getScrollParent.js"):

Started GET "/_/084d303b.js" for 127.0.0.1 at 2024-02-02 16:01:33 -0500

ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getOffsetParent.js"):


ActionController::RoutingError (No route matches [GET] "/_/084d303b.js"):

Started GET "/_/a9ca29ce.js" for 127.0.0.1 at 2024-02-02 16:01:34 -0500

ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getDocumentRect.js"):


ActionController::RoutingError (No route matches [GET] "/assets/dom-utils/getViewportRect.js"):

Started GET "/_/bb24ce41.js" for 127.0.0.1 at 2024-02-02 16:01:34 -0500

ActionController::RoutingError (No route matches [GET] "/_/a9ca29ce.js"):


ActionController::RoutingError (No route matches [GET] "/_/bb24ce41.js"):

Started GET "/_/2d19854a.js" for 127.0.0.1 at 2024-02-02 16:01:34 -0500

ActionController::RoutingError (No route matches [GET] "/_/2d19854a.js"):

Started GET "/_/c7d11060.js" for 127.0.0.1 at 2024-02-02 16:01:34 -0500

ActionController::RoutingError (No route matches [GET] "/_/c7d11060.js"):


ActionController::RoutingError (No route matches [GET] "/assets/utils/getMainAxisFromPlacement.js"):

Started GET "/_/1ba79728.js" for 127.0.0.1 at 2024-02-02 16:01:34 -0500
Started GET "/_/6a201025.js" for 127.0.0.1 at 2024-02-02 16:01:34 -0500

ActionController::RoutingError (No route matches [GET] "/_/6a201025.js"):


ActionController::RoutingError (No route matches [GET] "/_/1ba79728.js"):


ActionController::RoutingError (No route matches [GET] "/assets/utils/getOppositePlacement.js"):


ActionController::RoutingError (No route matches [GET] "/assets/utils/getOppositeVariationPlacement.js"):


ActionController::RoutingError (No route matches [GET] "/assets/utils/computeAutoPlacement.js"):


ActionController::RoutingError (No route matches [GET] "/assets/utils/detectOverflow.js"):

当前importmap.rb配置如下：

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "bootstrap.min.js" # @5.3.2
pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3
pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8

解决方案

这些错误是因为Bootstrap依赖Popper.js，但Importmap未正确处理Popper的内部模块引用，导致浏览器直接请求未映射的资源路径。按以下步骤修复：

调整Importmap中Popper的配置，使用完整UMD包并预加载
修改importmap.rb中Popper的pin配置，指定UMD版本文件（该版本会打包所有内部模块，避免拆分加载），并添加预加载：
```
pin "@popperjs/core", to: "@popperjs--core.umd.min.js", preload: true # @2.11.8
```
确保Bootstrap的pin配置在Popper之后，保证依赖加载顺序正确。
检查JS文件的导入顺序
在app/javascript/application.js中，先导入Popper再导入Bootstrap：
```
import "@popperjs/core"
import "bootstrap"
```
清理缓存并重启服务器
执行命令清除旧资源缓存，避免映射残留：
```
bin/rails assets:clobber
bin/dev # 重启服务器
```
验证Importmap映射
运行bin/importmap json查看映射结果，确认@popperjs/core指向的是UMD版本文件，而非拆分的模块文件。

内容的提问来源于stack exchange，提问作者mila002