search

twbs / bootstrap-rubygem

Bootstrap rubygem for Rails / Sprockets / Hanami / etc
https://rubygems.org/gems/bootstrap
MIT License
2.02k stars 447 forks source link

Bootstrap 4.6.2 popper issue #257

Open helmutrs opened 1 year ago

helmutrs commented 1 year ago

Ruby 3.1.3 Rails 7.0.4.3

using import maps and sprockets (without nodejs).

gem 'bootstrap', '~> 4.6', '>= 4.6.2'

there is an issue with popper: undefined is not an object (evaluating 'e.Popper=t()')

when change to bootstrap 5v, the issue disappear. (same config just different gem version)

config/importmap.rb pin 'popper', to: 'popper.js', preload: true pin 'bootstrap', to: 'bootstrap.min.js', preload: true

app/assets/stylesheets/application.scss

@import 'bootstrap';

app/javascript/application.js:

//= require jquery3 //= require popper //= require bootstrap

HiGitHubH commented 1 year ago

I also met this problem. Has it been solved?

nbaki commented 1 year ago

I was seeing the same Popper JS error and noticed that my project was loading Bootstrap 5 instead of 4, regardless of my //= require bootstrap. It turns out there was a lingering bootstrap npm package in my node_modules folder that is also including in the asset paths, this was trumping this gem's assets because of the order of load.

Hopefully this information helps others!

rahulbir commented 1 year ago

Also seeing this issue, did anyone find a fix?

rahulbir commented 1 year ago

I was able to work around this bug by using the bundled JS version of Bootstrap (bootstrap.bundle.min.js) this file includes Popper but not JQuery.

Gemfile

gem 'bootstrap', '~> 4.6.2'  # Used for SCSS

application.scss

@import 'boostrap';

Importmap 

pin 'jquery', to: 'jquery3.min.js', preload: true
pin 'bootstrap', to: 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js', preload: true

asset.rb

Rails.application.config.assets.precompile += [
  'jquery3.min.js',
  'bootstrap.bundle.min.js'
]

application.js

import 'jquery';
import 'bootstrap';

Hope this helps!