Client-side JS error when showing a Dialog with certain types of components on it

Marczeeee commented 4 weeks ago

Description of the bug

When I try to pop up a Dialog in my application from a MenuBar element (using a Button as menu item, it's invoking the Dialog when clicked) with a ComboBox and/or a Grid on it, the Dialog shows but without the components, and there are JS exceptions on the console.

The following errors are shown on the console in Chrome:

FlowClient-BZ2ixoyw.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'initLazy')
    at HTMLElement.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), <anonymous>:3:59)
    at Object.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), <anonymous>:3:76)
    at Q3 (FlowClient-BZ2ixoyw.js:3:42444)
    at Bg (FlowClient-BZ2ixoyw.js:3:22831)
    at Xm (FlowClient-BZ2ixoyw.js:1:24808)
    at om (FlowClient-BZ2ixoyw.js:1:19919)
    at z.cb (FlowClient-BZ2ixoyw.js:3:69323)
    at Jr (FlowClient-BZ2ixoyw.js:3:15280)
    at nE (FlowClient-BZ2ixoyw.js:3:45560)
    at z.C (FlowClient-BZ2ixoyw.js:3:69109)
    at _r (FlowClient-BZ2ixoyw.js:1:41536)
    at z.bb (FlowClient-BZ2ixoyw.js:3:58847)
    at z.I (FlowClient-BZ2ixoyw.js:3:63223)
    at FlowClient-BZ2ixoyw.js:3:12404
FlowClient-BZ2ixoyw.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'updateSize')
    at Object.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), <anonymous>:3:22)
    at Q3 (FlowClient-BZ2ixoyw.js:3:42444)
    at Bg (FlowClient-BZ2ixoyw.js:3:22831)
    at Xm (FlowClient-BZ2ixoyw.js:1:24808)
    at om (FlowClient-BZ2ixoyw.js:1:19919)
    at z.cb (FlowClient-BZ2ixoyw.js:3:69323)
    at Jr (FlowClient-BZ2ixoyw.js:3:15280)
    at nE (FlowClient-BZ2ixoyw.js:3:45560)
    at z.C (FlowClient-BZ2ixoyw.js:3:69109)
    at _r (FlowClient-BZ2ixoyw.js:1:41536)
    at z.bb (FlowClient-BZ2ixoyw.js:3:58847)
    at z.I (FlowClient-BZ2ixoyw.js:3:63223)
    at FlowClient-BZ2ixoyw.js:3:12404
FlowClient-BZ2ixoyw.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'set')
    at Object.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), <anonymous>:3:22)
    at Q3 (FlowClient-BZ2ixoyw.js:3:42444)
    at Bg (FlowClient-BZ2ixoyw.js:3:22831)
    at Xm (FlowClient-BZ2ixoyw.js:1:24808)
    at om (FlowClient-BZ2ixoyw.js:1:19919)
    at z.cb (FlowClient-BZ2ixoyw.js:3:69323)
    at Jr (FlowClient-BZ2ixoyw.js:3:15280)
    at nE (FlowClient-BZ2ixoyw.js:3:45560)
    at z.C (FlowClient-BZ2ixoyw.js:3:69109)
    at _r (FlowClient-BZ2ixoyw.js:1:41536)
    at z.bb (FlowClient-BZ2ixoyw.js:3:58847)
    at z.I (FlowClient-BZ2ixoyw.js:3:63223)
    at FlowClient-BZ2ixoyw.js:3:12404
FlowClient-BZ2ixoyw.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'confirm')
    at Object.eval (eval at Q3 (FlowClient-BZ2ixoyw.js:3:42383), <anonymous>:3:22)
    at Q3 (FlowClient-BZ2ixoyw.js:3:42444)
    at Bg (FlowClient-BZ2ixoyw.js:3:22831)
    at Xm (FlowClient-BZ2ixoyw.js:1:24808)
    at om (FlowClient-BZ2ixoyw.js:1:19919)
    at z.cb (FlowClient-BZ2ixoyw.js:3:69323)
    at Jr (FlowClient-BZ2ixoyw.js:3:15280)
    at nE (FlowClient-BZ2ixoyw.js:3:45560)
    at z.C (FlowClient-BZ2ixoyw.js:3:69109)
    at _r (FlowClient-BZ2ixoyw.js:1:41536)
    at z.bb (FlowClient-BZ2ixoyw.js:3:58847)
    at z.I (FlowClient-BZ2ixoyw.js:3:63223)
    at FlowClient-BZ2ixoyw.js:3:12404`

The same dialog opened in Firefox results in these errors:
`Uncaught TypeError: window.Vaadin.Flow.comboBoxConnector is undefined
    anonymous https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    anonymous https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    Q3 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Bg https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Xm https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    om https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    cb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Jr https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    nE https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    C https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    _r https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    bb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    I https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    X2 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
Caused by: undefined
FlowClient-BZ2ixoyw.js line 3 > Function:3:22
    anonymous https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    anonymous https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    Q3 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Bg https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Xm https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    om https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    cb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Jr https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    nE https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    C https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    _r https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    bb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    I https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    X2 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
Uncaught TypeError: $0.$connector is undefined
    anonymous https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    Q3 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Bg https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Xm https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    om https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    cb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Jr https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    nE https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    C https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    _r https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    bb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    I https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    X2 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
Caused by: undefined
3 FlowClient-BZ2ixoyw.js line 3 > Function:3:1
    anonymous https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    Q3 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Bg https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Xm https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    om https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    cb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Jr https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    nE https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    C https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    _r https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    bb https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    I https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    X2 https://127.0.0.1:8443/das-portal-vaadin/VAADIN/build/FlowClient-BZ2ixoyw.js:3

Some observations and facts:

The errors occur only if the code was built to production mode. In development mode, it works fine.
Tried to create a minimal webapp to reproduce the problem, but in a different app using the same mechanism to open a Dialog everything works fine.
If I put the Button (used within the menubar) to a standalone view and click it there, the Dialog shows up the same way wrong.
If I remove the ComboBox and Grid components from the Dialog, and only leave a TextField on it, the Dialog shows properly without errors.
If I leave all ComboBox and Grid components on the dialog and add a TextField to it, the Dialog will show the TextField but nothing else, and there will be client-side errors.

Expected behavior

The Dialog with a ComboBox and/or a Grid should show all the components added, without any client-side JS errors.

Minimal reproducible example

Open a Dialog with a ComboBox and/or a Grid on it, and it will open with client-side JS errors.

Versions

Vaadin / Flow version: 24.3.10 (tried older and new 24.3.x versions, no difference)
Java version: Temurin JDK 17.0.11+9
OS version: Windows 11 Pro
Browser version (if applicable): Chrome 125.0.6422.78, Firefox 126.0.1
Application Server (if applicable): Tomcat 10.1.24
IDE (if applicable):

AlainaFaisal commented 3 weeks ago

Can you try to configure maven plugin with <optimizeBundle>false</optimizeBundle> and see if the error persists?

Marczeeee commented 3 weeks ago

Can you try to configure maven plugin with <optimizeBundle>false</optimizeBundle> and see if the error persists?

It worked! With setting this to false the errors gone and everything works fine! Can I use this setting safely in a production environment? Will be any downside of it?

AlainaFaisal commented 3 weeks ago

Can you please tell us if you are using reflection to load components? You can also have a look at this for more details: https://vaadin.com/docs/latest/production/production-build#bundle-component-loading-optimizations

This setting is safe to use. You can also find out more about it here: https://vaadin.com/docs/v23/configuration/maven#build-front-end-goal-parametershttps://vaadin.com/docs/v23/configuration/maven#build-front-end-goal-parameters

You have also mentioned that you used 23.4.10 version. Did you mean 24.3.10?

Marczeeee commented 3 weeks ago

We don't use reflections directly, but use Spring (not Spring-boot) which I think uses reflection.

Yes, the correct version is 24.3.10! Fixed this in my opening comment as well.

Thank you for your help!

vaadin / flow