Custom component + bootstrap

I’m trying to create component(vaadin 24) with some functionality written in javascript. For this purpose I need to import jquery and bootstrap.
For now component has form:
@NpmPackage(value = “jquery”, version = “3.6.4”)
@NpmPackage(value = “bootstrap”, version = “5.2.3”)

public class GraphRoom extends Div {


all stuff should be in graphRoom.js:
‘use strict’;
import $ from “jquery”;
import “bootstrap”;

Everything is working with jquery. But I’m getting an errors with bootstrap all the time. Like “d.modal is not a function”. If I try some check-stuff in browser console(like typeof $().emulateTransitionEnd == ‘function’) - same error.
Everything indicates that bootstrap is not included.

Any ideas?

The order of the imports matter in this case

Thus you can’t include jquery into bundle, it may be executed later than the module which uses it, and as you are using old-fashioned libraries, the library using jquery does not have import to it

So that kind of legacy libraries are not working well with modern tools like vite

What you can do is to take these old libs out of bundling by including them as resources

The only problem in this approach is that you can’t rely on npm / vite for deduping etc.

Thus e.g. if you include jquery that way in your project and then e.g. use that PivotTable add-on, you may end up having jquery twice in your project as different versions and then troubles again

Thus I would recommend generally to avoid such old legacy libraries unless you absolutely cannot.