Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS interactions not working when following the instructions in the README #248

Closed
jasonfb opened this issue Jan 2, 2023 · 4 comments · May be fixed by #254
Closed

JS interactions not working when following the instructions in the README #248

jasonfb opened this issue Jan 2, 2023 · 4 comments · May be fixed by #254

Comments

@jasonfb
Copy link

jasonfb commented Jan 2, 2023

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

jasonfb added a commit to jasonfb/ExampleBootstrapGem248 that referenced this issue Jan 2, 2023
@jasonfb jasonfb changed the title No JS works when following the instructions No JS works when following the instructions in the README Jan 2, 2023
@jasonfb jasonfb changed the title No JS works when following the instructions in the README JS interactions not working when following the instructions in the README Jan 2, 2023
@WilliamMena
Copy link

@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
Copy link

@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
Copy link

clwy-cn commented Feb 22, 2023

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

This was referenced Feb 22, 2023
@julien-deramond julien-deramond linked a pull request Feb 22, 2023 that will close this issue
@jasonfb jasonfb closed this as completed Feb 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants