CODEWITHSUNDEEP
jqueryjquery-pluginsvaadinvaadin-flow
ulim
ulim

Reputation: 171

How to define jQuery globally in Vaadin 23/24, so I can use jQuery Plugins?

In Vaadin 14 it was possible to integrate jQuery Plugins like so:

@JsModule("./src/jquery-loader.js")
@JsModule("./src/myplugin-loader.js")

In jquery-loader.js something like:

import * as $ from 'jquery';
window.jQuery = $;
window.$ = $;

This would allow me to import a JQuery plugin in myplugin-loader.js like:

import "my-plugin/dist/myplugin.min.js";

And within the plugin's code the "jQuery" global variable was accessible.

This does not work anymore with Vaadin 23 or 24. I am getting either:

ReferenceError: jQuery is not defined or can't define property "myplugin": Object is not extensible (the latter when the plugin tries to set itself as a property of the jQuery object)

Note that in Vaadin 23 I can still run my application in Vaadin development mode, the error only appears in production mode. Whereas in Vaadin 24 the error appears in both development and production mode.

All of this leads to my Vaadin application not starting (the loading progress bar never disappears). What have the changes been from Vaadin 14 to 23 in terms of defining global JavaScript variables?

Upvotes: 0

Views: 34

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10633

Vaadin uses Vite for frontend builds, so it is not friendly with legacy libraries like jQuery. Sometimes you indeed want to use it when integrating a legacy JavaScript library that depends on it. E.g. I have done so when creating the PivotTable component using the old pivottable.js library. Then the solution is not to include it in the bundle, but load it from the resources.

E.g. in case of PivotTable I was having these

@StyleSheet("context://c3/c3.min.css")
@StyleSheet("context://pivottable/dist/pivot.css")
@JavaScript("context://jquery/dist/jquery.min.js")
@JavaScript("context://jqueryui/jquery-ui.min.js")
@JavaScript("context://d3/build/d3.min.js")
@JavaScript("context://c3/c3.min.js")
@JavaScript("context://pivottable/dist/pivot.min.js")
@JavaScript("context://pivottable/dist/c3_renderers.min.js")
@JavaScript("context://pivottable/dist/export_renderers.min.js")
@JavaScript("context://tabletojson/lib/jquery.tabletojson.min.js")
@JavaScript("./pivot_connector.js")
@CssImport("./lumo-pivot.css")
public class PivotTable extends Composite<Div> {
   ...
}

Then just download the needed files and them to your project resources folder.

"./pivot_connector.js" is my middle layer file and as the libraries I am using are not being processed by Node and Vite, I am not using import statements there, but I just use jQuery directly.

Upvotes: 0

Related Questions