Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Marczeeee opened this issue Jun 10, 2024 · 4 comments
Open

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

Marczeeee opened this issue Jun 10, 2024 · 4 comments
Labels
investigation

Comments

@Marczeeee
Copy link

Marczeeee commented Jun 10, 2024 •
edited

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
Copy link
Contributor

AlainaFaisal commented Jun 11, 2024 •
edited

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

@Marczeeee
Copy link
Author

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
Copy link
Contributor

AlainaFaisal commented Jun 11, 2024 •
edited

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
investigation
Projects
Vaadin Flow bugs & maintenance (Vaadin 10+)
Status: 🔎 Investigation
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Marczeeee @AlainaFaisal