twbs/bootstrap-rubygem

JS interactions not working when following the instructions in the README

jasonfb opened this issue · 4 comments

jasonfb commented

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)
bootstrap-no-js

expected result: (JS interactions work)

bootstrap-workingjs

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)

Screen Shot 2023-01-02 at 1 44 23 PM

WilliamMena commented

@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 commented

@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 commented

@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.

  • 👍2
  • ❤️1