twbs/bootstrap

Bootstrap 5 not working with Vite and jQuery

Open

#38.914 aperta il 17 lug 2023

Vedi su GitHub
 (10 commenti) (0 reazioni) (0 assegnatari)MDX (78.904 fork)batch import
docshelp wantedjsv5

Metriche repository

Star
 (174.240 star)
Metriche merge PR
 (Merge medio 6g 11h) (47 PR mergiate in 30 g)

Descrizione

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

Guida contributor