Vaadin plugins not executing javascript

Flow
1

We have a screen that embeds the Quill editor plugin. On our sites running Vaadin 23 the plugin works just fine and the editor shows up. However, this is broken in Vaadin 24.

When we run locally in development mode through IntelliJ the editor is there and functions properly.
However, on deployed sites running Vaadin 24 the editor does not show up, but instead we see this error in the browser console: Uncaught (in promise) TypeError: $0.initEditor is not a function.

Since that plugin has not been updated since Vaadin 14, we downloaded f fork that had updated Lit packages, but it didn’t make any difference.

@NpmPackage(value = "lit-element", version = "^3.0.0")
@NpmPackage(value = "lit-html", version = "^2.4.0")
@NpmPackage(value = "quill", version = "^1.3.7")
@JsModule("./quilleditor.js")

I think our developers even tried another rich text editor plugin (ckeditor) and had the same issue so it doesn’t feel like it is isolated to this particular plugin. We have some of our own Lit components that are not plugins and they do work.

This feels like a tree-shaking issue, that Vaadin is not including the quilleditor.js when it builds the front end. Is there something we missed in the upgrade from Vaadin 23 to 24?

2

I know that in upgrading from Vaadin 23->24 I moved our frontend directory. I also notice that the add-on samples for Vaadin 24 the frontend directory has moved. Does that need to be moved in any add-ons we include in our application?

3

Did you already try the following two configuration params? Problems with frontend generation - #4 by knoobie

4

Just noting, that Vaadin framework itself have backed in dependencies to Lit-library, so you should not need these and in order to avoid dependency conflicts you should avoid this.

5

Are those changes for building the plugin because I haven’t been able to get that to work.

We use gradle for our deployment and already pass in -Pvaadin.productionMode=true

6

Those are configuration for the plugin, the same could be applied for Gradle - but no idea how :)

7

I think this block in the build.gradle is what finally worked for us. Both the Quill Editor and CK Editor add-ons are working our deployed site today:

vaadin {
    productionMode = true
    forceProductionBuild = true
    optimizeBundle = false
}