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

Bootstrap 4.6.2 popper issue #257

Open
helmutrs opened this issue Apr 13, 2023 · 4 comments
Open

Bootstrap 4.6.2 popper issue #257

helmutrs opened this issue Apr 13, 2023 · 4 comments

Comments

@helmutrs
Copy link

helmutrs commented Apr 13, 2023

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

I also met this problem. Has it been solved?

@nbaki
Copy link

nbaki commented May 23, 2023

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

rahulbir commented Sep 5, 2023

Also seeing this issue, did anyone find a fix?

@rahulbir
Copy link

rahulbir commented Sep 5, 2023

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!

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

No branches or pull requests

4 participants