flow icon indicating copy to clipboard operation
flow copied to clipboard

Published 20 hours ago • verified publisher icon vaadin

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

Open Marczeeee opened this issue 1 year ago • 4 comments

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):

Marczeeee avatar Jun 10 '24 11:06 Marczeeee

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

AlainaFaisal avatar Jun 11 '24 11:06 AlainaFaisal

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?

Marczeeee avatar Jun 11 '24 11:06 Marczeeee

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?

AlainaFaisal avatar Jun 11 '24 12:06 AlainaFaisal

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!

Marczeeee avatar Jun 11 '24 14:06 Marczeeee

I have a similar error in our application. During page load the javascript console sometimes prints:

FlowClient-DyMGXbet.js:1 
 Uncaught TypeError: Cannot read properties of undefined (reading 'updateSize')
    at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:22)
    at jE (FlowClient-DyMGXbet.js:3:45167)
    at cp (FlowClient-DyMGXbet.js:3:23411)
    ...
Uncaught TypeError: Cannot read properties of undefined (reading 'set')
    at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:22)
    at jE (FlowClient-DyMGXbet.js:3:45167)
    at cp (FlowClient-DyMGXbet.js:3:23411)
    ...
Uncaught TypeError: Cannot read properties of undefined (reading 'confirm')
    at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:22)
    at jE (FlowClient-DyMGXbet.js:3:45167)
    at cp (FlowClient-DyMGXbet.js:3:23411)
    ...
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setHeaderRenderer')
    at ye.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:44)
    at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:118)
    at jE (FlowClient-DyMGXbet.js:3:45167)
    ...
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setFooterRenderer')
    at ye.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:44)
    at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), <anonymous>:3:85)
    at jE (FlowClient-DyMGXbet.js:3:45167)
    ...

The page has two grids, but no menu. It contains a dialog, but this dialog is not yet initialized. So it might not be the exactly same problem that @Marczeeee had.

When this happens, the first grid is not displayed at all. It seems that the grid doesn't get initialized. No error logs on backend side. The above client logs are follow-up errors, apparently, because the FlowClient tries to set properties on the grid instance which is isn't there.

This doesn't happen always, but just in ~40% of page reloads. This indicates that this is some kind of race condition.

This happens only in productive mode. I tried with <optimizeBundle>false</optimizeBundle> but unfortunately it doesn't solve the problem. FYI, I used the following; hope this is correct:

                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <configuration>
                                    <optimizeBundle>false</optimizeBundle>
                                </configuration>
                            </execution>
                        </executions>
                    </plugin>

We're not using reflection directly, but we're using JBoss 8/WildFly with CDI.

Vaadin 24.8.4 Browser Edge 138.0.3351.95 Windows 11 Pro Java 17.0.12+7-LTS (RedHat)

PS: It would be very helpful if there's a way to switch off the minification for the production build. Then I would be better able to pinpoint the error.

dmoebius avatar Jul 30 '25 18:07 dmoebius

Nevermind, I found the error: some other part of the application updated the UI from an asynchronous thread with ui.push() and forgot to wrap it into ui.access(Command). If the UI loaded something at the same time via a Grid DataProvider, while this push() was happening, then the internal state of Vaadin was garbled, and the UIDL response was missing data.

The application is huge, and distributed over many libs, so I wasn't aware of this other part.

I wrapped it into ui.access() and now everything is fine. :)

dmoebius avatar Jul 31 '25 18:07 dmoebius

Interesting addon: the whole problem did't happen on Linux. Probably because Athmosphere has a different implementation there, or the network stack is different, so the websocket is handled differently during push().

dmoebius avatar Jul 31 '25 18:07 dmoebius