twbs/bootstrap

Bootstrap 5 not working with Vite and jQuery

Open

#38914 opened on Jul 17, 2023

View on GitHub
 (10 comments) (0 reactions) (0 assignees)MDX (174,240 stars) (78,904 forks)batch import
docshelp wantedjsv5

Description

Prerequisites

Describe the issue

Bootstrap 5 provides instructions for getting started with Vite, and separate instructions for optionally using jQuery.

The documentation states

If Bootstrap detects jQuery in the window object it’ll add all of our components in jQuery’s plugin system;

Based on that I am setting window.jQuery in my main.js file, before including a bootstrap plugin.

// Import jQuery
import jQuery from 'jquery';

// Add jQuery to the Window (see https://getbootstrap.com/docs/5.2/getting-started/javascript/#optionally-using-jquery)
window.jQuery = jQuery;

// Import only the Bootstrap components we need
import { Popover } from 'bootstrap';

// Initialise the popover onload
jQuery(function() {
    jQuery('[data-bs-toggle="popover"]').popover();
});

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

Contributor guide