JS interactions not working when following the instructions in the README

[jasonfb]

I am consistently getting a result where the popper and JS interactions are not working even after carefully going through the instructions. I am trying to build a Importmap app using this gem (not using Sprockets or Propshaft)

I am seeing

Uncaught TypeError: i.createPopper is not a function

reproduction app:
https://github.com/jasonfb/ExampleBootstrapGem248

result: (JS does not work)

expected result: (JS interactions work)

bootstrap.min-67c48d88a8e0be178058aacb338b084191ed6d65c8fef751c50248202cf1488a.js:6 Uncaught TypeError: i.createPopper is not a function
    at Mt._createPopper (bootstrap.min-67c48d88a8e0be178058aacb338b084191ed6d65c8fef751c50248202cf1488a.js:6:23976)
    at Mt.show (bootstrap.min-67c48d88a8e0be178058aacb338b084191ed6d65c8fef751c50248202cf1488a.js:6:22285)
    at Mt.toggle (bootstrap.min-67c48d88a8e0be178058aacb338b084191ed6d65c8fef751c50248202cf1488a.js:6:22113)
    at HTMLAnchorElement.<anonymous> (bootstrap.min-67c48d88a8e0be178058aacb338b084191ed6d65c8fef751c50248202cf1488a.js:6:26753)
    at HTMLDocument.s (bootstrap.min-67c48d88a8e0be178058aacb338b084191ed6d65c8fef751c50248202cf1488a.js:6:4490)

[WilliamMena]

@jasonfb Did you find an alternative approach?

I've added the gem into my app, and the navbar responds the same way. The only difference is that I don't get that error in my console.

[WilliamMena]

@jasonfb I started following this tutorial all to realize that I wasn't calling the appropriate ID here data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup".

That error is troubling so consider using the tutorial I linked which is pretty similar to what we've done in this app's readme except it will link to some other CDNs.

[clwy-cn]

@jasonfb @WilliamMena
Some important things are missing from README.

You need to add some code to app/javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"

// Notice here and import them in the following order
import "@popperjs/core"
import "bootstrap"

Problem solved.

[jasonfb]

I think I was using the wrong bootstrap code here. Either way , I got it working:
for JSBundling:
https://jasonfleetwoodboldt.com/courses/rails-7-crash-course/rails-7-jsbundling-with-esbuild-stimulus-turbo-bootstrap-circleci-up-running/

for Importmap:
https://jasonfleetwoodboldt.com/courses/rails-7-crash-course/rails-7-importmap-rails-with-bootstrap-stimulus-turbo-long-tutorial/