Ruby on Rails 7 popperjs/core errors

Question

I just have installed the Rails 7 and Bootstrap 5. App starts fine but in log I have a lot of errors:

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"):

My importmap.rb file

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

Can you help me to fix this issue?

Answer 1

I suggest you start your app with -c bootstrap -j esbuild options. There was quite the change in importmap-rails v2 that broke everything:

https://github.com/rails/importmap-rails/pull/217

You can also manually add bootstrap pins to load from jspm:

# config/importmap.rb

pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/[email protected]/lib/index.js"

and perhaps downgrade importmap-rails to v1 for the time being:

# Gemfile 

gem "importmap-rails", "~> 1.0"