Blank page and no visible error when using custom component (using jQuery and Summernote) in production mode

[Frettman]

trafficstars

Description of the bug

I was trying to wrap Summernote into web component with a corresponding Java class. It eventually worked fine from Eclipse or via ./mvnw spring-boot:run. But with a production mode build, loading the application in the browser failed with Uncaught TypeError: Failed to resolve module specifier "jQuery". Relative references must start with either "/", "./", or "../". which was referring to import p2 from"jQuery"; in generated-flow-imports.44648f3a.js. JChristophe was kind enough to offer taking a look, so I extracted the component to an MRE: https://github.com/Frettman/mre-summernote He then ultimately suggested I create this ticket. In the MRE it still works from Eclipse and the production mode build is still broken. But in the latter case there's nothing now. Just the empty index.html and no visible error any more.

The related Discord thread: https://discord.com/channels/732335336448852018/1072121801230008360

In my original application, the component was part of an add-on, so I tried if that setup made any difference, but the result was the same for me. I also tried it with the latest Vaadin 24 release candidate. Here it doesn't even work from Eclipse, but at least there was an error now: (index):7 (TypeError) : jqueryExports$1(...).summernote is not a function. Which might of course have nothing to do with the original error...

Expected behavior

The application should load or at least show a (helpful) error message.

Minimal reproducible example

See https://github.com/Frettman/mre-summernote Just run from Eclipse or run via ./mvnw spring-boot:run

Versions

• Vaadin / Flow version: 23.3.6, 24.0.0.rc2
• Java version: 11, 17
• OS version: Windows 10
• Browser version (if applicable): Firefox, Chrome
• IDE (if applicable): Eclipse

[Artur-]

The exception comes from

$(this._summernote).summernote('code', this._value);

in the value setter. When this is called this._summernote is undefined.

[Artur-]

The reason for the blank page is #2963

[Frettman]

Okay, that explains the blank page, instead of an error, which Vaadin 24 seems to fix. But why does my Summernote integration work in dev mode, but not in production mode?

[Artur-]

The code at https://github.com/Frettman/mre-summernote fails the same way both in development and production mode, so hard to say if the error and the problem is different

There should never be a line like

import p2 from"jQuery";

in the final JS at least because that cannot work in the browser

[Frettman]

That's weird. I just tried it again with a fresh checkout and from within Eclipse the projects runs without errors:

[mcollovati]

@Frettman do you still have the issue or can we close the ticket?

[Frettman]

I'm not aware of any changes of fixes, so I had to give up on this a while ago. Not encouraging for future projects... Anyway, some quick tests using the latest v23 and v24 on the example project from above still indicate that there are (the same?) issues. But I don't have the time or motivation to really dig down on them anymore. For v23 no changes from what I can see (Eclipse works, spring-boot:run works, production build -> blank page) For v24 it seems a bit weird: from Eclipse -> blank page. production build -> blank page. ./mvnw spring-boot:run seemed to work, strangely enough.

[mshabarov]

I tried on my local and get the blank page without absolutely nothing in the browser console and in the server logs. In my generated-flow-imports.430198e4.js I couldn't even find the mention above import string. Have absolutely no idea where to look at, so no chance to move forward with the investigation. I'd prioritise this issue https://github.com/vaadin/flow/issues/2963 as a next candidate for our team. This would help to fix issues like this.

[gl0b3]

I just checked out the project from the github. For me, if I build without production everything is fine, but when i run 'mvn clean install -Pproduction' and then run the application (from IntelliJ IDEA with the Run 'Apllication.main()') the browser shows the blank page and the console shows no error.