Install Bootstrap with Popperjs in Rails 7+ with Importmaps

This article summarises the information on this github issue Install CSS bundling rails. And install as per instructions.

bin/bundle install cssbundling-rails
bin/rails css:install:bootstrap
bin/rails css:install:sass

Getting the correct files

The issue is that the bootstrap .js file doesn’t work. You need your own esm module version. You can get these from js delivr website

Bootstrap

cd vendor/javascript && wget https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js

PopperJS

bin/importmap pin @popperjs/core@2.11.8/+esm --from jsdelivr
mv vendor/javascript/@popperjs--core--+esm.js vendor/javascript/popperjs-core.esm.js

Set up

Just need to set up the importmap.rb file and the application.js file.

importmap.rb

pin "bootstrap", to: "bootstrap.esm.js" # 5.3.2
pin "@popperjs/core", to: "popperjs-core.esm.js" # 2.11.8

application.js

window.process = { env: { NODE_ENV: 'production'} }
import 'bootstrap'
import '@popperjs/core'