browse_everything JS will automatically sprockets-import bootstrap, which can easily resulting in double-import of bootstrap

[jrochkind]

The instructions to require browse-everything JS via sprockets are to:

//= require browse_everything

Which will give you this file: https://github.com/samvera/browse-everything/blob/main/app/assets/javascripts/browse_everything.js

Which includes a //= require bootstrap.

The original thinking probably was that sprockets require can be issued multiple times, and it will only require a file once, so this ensures that bootstrap JS is included, and works whether or not the containing app also separately does a require bootstrap.

However, this ends up being a real gotcha, there are several common circumstances that wind up with bootstrap JS being double included -- this increases the size of your JS package, but also makes it misbehave in some circumstances, bootstrap 4 JS for instance winds up requiring a double click to open a dropdown if JS has been double-included.

bootstrap vs bootstrap_sprockets

The bootstrap gem lets you require bootstrap or require bootstrap_sprockets. If you've done this one way in one place, and then browse_everything does it another way, you will wind up with bootstrap JS double-included, because you included it in two different forms.

As browse_everything last year changed how it did it, that likely resulted in some people doing a double-JS include. :( d571982

Transitioning bootstrap to non-sprockets

I am trying to move my app's JS management away from sprockets, to an ES6/npm-based solution like esbuild or vite. So I moved the bootstrap inclusion to an import in my modern tool. But of course browse-everything JS is still only available via JS, so I still had a sprockets package that did a require browse_everything. Which triggers it's own bootstrap inclusion, so oops I now have double bootstrap JS again.

Best solution?

I think probably browse-everything JS ought not to require bootstrap, the hosting application should be expected to do that on it's own -- just like is already expected for jquery!

But that would, I guess, be a backwards incompat change at this point. And there isn't really a lot of maintenance energy for browse-everything right now, or a clear release management plan. So it seems unrealistic to think this will happen?

Workaround

You can actually copy the contents of the current browse_everything.js file into your local sprockets application.js (or other local file).

And you can leave out the require bootstrap.

So instead of having //= require browse_everything in your local file (that will trigger bootstrap inclusion), your local file can just do:

//= require jquery.treetable
//= require browse_everything/behavior

This seems to work! Including necessary b-e JS without bootstrap.

(At first I wasn't sure where jquery.treetable was even coming from, but I guess from this gem, at vendor/assets/javascripts/jquery.treetable.js

So if nothing else, I leave this issue here as a wayfinding aid to anyone else running into this problem.