Open liamkeily opened 1 year ago
I have dug further into this and it looks like bootstraps defineJQueryPlugin(Popover)
and its containing onDOMContentLoaded
is getting called before the window.jQuery = jQuery
line in main.js
. So window.jQuery
is not defined at the time it is trying to register the plugin.
I guess this is something to do with the way Vite loads dependencies
This also worked fine for Bootstrap 4, which we are upgrading from.
Created a separate branch on that repo to prove that Bootstrap 4 works https://github.com/liamkeily/bootstrap-examples/compare/vite-and-jquery...liamkeily:bootstrap-examples:vite-and-jquery-bootstrap4
Any PRs that fix the issue are welcome. But please try to add a test case.
Any news?
I encountered this as well while listening for a Bootstrap modal event - jQuery event wasn't triggered but listening with addEventListener
was.
Could Bootstrap expose a function (use()
for example, or setJquery()
) which would let us set the jQuery library for Bootstrap to use, falling back to the window.jQuery
if not present?
Then the usage would be:
import $ from 'jquery';
import bootstrap from 'bootstrap';
bootstrap.use($);
instead of doing window.jQuery = $;
?
I can create a PR if this might be of interest?
This is actually really easy to fix, it's just not documented anywhere.
Create a "wrapper" for jquery like this:
jquery_import.js
import $ from 'jquery';
window.$ = window.jQuery = $;
In your main js file, import this wrapper before importing the JS for bootstrap 5.
If you don't use a wrapper file, Vite moves the global declaration to the very end of the built JS file, and it won't work.
Thanks @skeets23 that did actually work
Let's reopen the issue and wait for someone to submit a PR. I'm pretty sure it's a common issue worth documenting.
Prerequisites
Describe the issue
Bootstrap 5 provides instructions for getting started with Vite, and separate instructions for optionally using jQuery.
The documentation states
Based on that I am setting
window.jQuery
in mymain.js
file, before including a bootstrap plugin.However it does not appear to be correctly registering the plugin.
Reduced test cases
This is a fork of the bootstrap example repo, a copy has been made of the
vite
example and the following commit attempts to make it work with jQuery instead of the Vanilla JS.https://github.com/liamkeily/bootstrap-examples/pull/1/commits/09fe7f2bbb9d11e68d43ab3c273b7fbc039e3043
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.0