Bootstrap not working

[omairrazam]

//importmap.rb
`pin "jquery", to: 'https://code.jquery.com/jquery-3.2.1.slim.min.js'

pin "popper", to: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'

pin "bootstrap", to: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'`

//application.js
import "jquery" import "bootstrap"
It seems like this is undefined when loading library in importmap ecosystem.

[guybedford]

@omairrazam Bootstrap as imported there is a "script" not a "module". In modules, the this binding is not the global object but undefined, so this.bootstrap = Bootstrap fails.

Either load that file as a script, or use a version of Bootstrap that works as a module. For example via a module CDN which can handle this conversion process.

[ianneub]

@omairrazam I had some issues getting bootstrap and popper working with Rails 7.0.0.alpha2, finally fixed them by changing the relevant entries in ./config/importmap.rb to:

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.0/dist/esm/index.js"

edit: those are newer versions of Bootstrap and Popper. I'm not sure if Bootstrap has an ESM ready version for 4.0.0.

[bensheldon]

@ianneub Do dropdowns work when you import the esm version of Bootstrap? I am only successful when pinning the bundle version that includes Popper, e.g.:

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"

Bootstrap's docs seem to imply that the dropdowns don't work for the esm version:

Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a <script> tag with module type because they depend on Popper. For more information about the issue see here.