vaadin-flow

Vaadin 24 - TypeError: window.Vaadin.Flow.loadOnDemand is not a function

I am in the process of upgrading the frameworks that our applications use. Of course, there are lots of interdependencies, so I am having to simultaneously upgrade many packages. This is painful, so we have put it off for way too long (10+ years). And now it is extra-super-painful. We are moving from Java 8 and Vaadin 14 to Java 17 and Vaadin 24. Due to other interdependencies, there was no lesser upgrade that appears workable.

Our applications mostly do data processing, with a couple of UIs to manage and visualize the processing and results. I have everything compiling and all unit and integration tests passing. The only thing remaining is to get the Vaadin UIs working.

Specifically, I am using Vaadin version 24.3.5. I have made only minor changes to the code that worked in Vaadin 14. I am initially trying to configure for production mode.

When I log in (via Cognito and pac4j), I land on the right page. The page title is set. The favicon is not set. The page is blank.

I don't see any failed requests from the browser: enter image description here

The only error in the browser dev tools console is this:

Vaadin push loaded 19client-082EA3AC42E3616DDE9D121C6870294B.cache.js:951 TypeError: window.Vaadin.Flow.loadOnDemand is not a function at eval (eval at gn (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:741:40), :3:27) at Hn.In [as Z] (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051:12942) at qn (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:951:34) at gn (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:741:61) at _k.al [as _] (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051:8695) at Jk (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:280:25) at Dk (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1012:131) at Fk (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:631:22) at Function.el (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051:8950) at d (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:699:46) at Map.forEach () at Ik (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:754:41) at jr (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:988:253) at kr (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1049:1081) at lr (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1032:403) at Aj (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:889:74) at Ro (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:795:110) at Uo (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:665:67) at Yo.Zo [as C] (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051:14907) at $b (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:993:207) at Tb (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:719:60) at bc.cc [as B] (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051:4234) at Yb (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:212:25) at Eb (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:457:29) at Hb (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:917:157) at client-082EA3AC42E3616DDE9D121C6870294B.cache.js:643:46 at d (client-082EA3AC42E3616DDE9D121C6870294B.cache.js:751:48) qn @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:951 gn @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:741 al @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051 Jk @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:280 Dk @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1012 Fk @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:631 el @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051 d @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:699 Ik @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:754 jr @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:988 kr @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1049 lr @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1032 Aj @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:889 Ro @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:795 Uo @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:665 Zo @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051 $b @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:993 Tb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:719 cc @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:1051 Yb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:212 Eb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:457 Hb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:917 (anonymous) @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:643 d @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:751 setTimeout (async) _b @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:752 Vb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:737 fo @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:618 Xo @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:406 Eb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:457 Hb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:917 (anonymous) @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:643 window.Vaadin.Flow.registerWidgetset @ status:2 Wo @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:627 To @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:992 Ui @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:199 g @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:892 Eb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:457 Hb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:917 (anonymous) @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:643 Ki @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:893 yb @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:2 Ib @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:13 (anonymous) @ client-082EA3AC42E3616DDE9D121C6870294B.cache.js:14 vaadinPush-min.js?v=ddea9beb2ba7e39ee5369f66a80db8f5887624889f8b7cd04f6c781232e5d51c:1 Invoking executeWebSocket, using URL: wss://localhost:8443/ops-war/app/VAADIN/push?v-r=push&v-uiId=0&v-pushId=12042f2b-937f-4996-b87a-26b5b04c90f2&X-Atmosphere-tracking-id=0&X-Atmosphere-Framework=3.1.2-javascript&X-Atmosphere-Transport=websocket&X-Atmosphere-TrackMessageSize=true&Content-Type=application/json; charset=UTF-8&X-atmo-protocol=true&X-Vaadin-LastSeenServerSyncId=0 vaadinPush-min.js?v=ddea9beb2ba7e39ee5369f66a80db8f5887624889f8b7cd04f6c781232e5d51c:1 Wed Feb 28 2024 18:39:57 GMT-0500 (Eastern Standard Time) Atmosphere: websocket.onopen vaadinPush-min.js?v=ddea9beb2ba7e39ee5369f66a80db8f5887624889f8b7cd04f6c781232e5d51c:1 Websocket successfully opened vaadinPush-min.js?v=ddea9beb2ba7e39ee5369f66a80db8f5887624889f8b7cd04f6c781232e5d51c:1 Wed Feb 28 2024 18:39:57 GMT-0500 (Eastern Standard Time) Atmosphere: websocket.onmessage vaadinPush-min.js?v=ddea9beb2ba7e39ee5369f66a80db8f5887624889f8b7cd04f6c781232e5d51c:1 Wed Feb 28 2024 18:39:57 GMT-0500 (Eastern Standard Time) Atmosphere: Firing onOpen vaadinPush-min.js?v=ddea9beb2ba7e39ee5369f66a80db8f5887624889f8b7cd04f6c781232e5d51c:1 Wed

The response content for the "status" page (64.5kB) includes the call that is failing:

            }

            log('Flow bootstrap loaded');
            var uidl = {
                "clientId": 0,
                "LAZY": [{
                    "url": "return window.Vaadin.Flow.loadOnDemand('8bff71a83299b4d4faad14a4d63275ef1c8f675f6ec33f58e73e5d3355a3be83');",
                    "type": "DYNAMIC_IMPORT",
                    "mode": "LAZY"
                }, {
                    "url": "return window.Vaadin.Flow.loadOnDemand('b2701f1a4f395de51e165a6f8e108456ab0933d396341096b80807d6234ce782');",
                    "type": "DYNAMIC_IMPORT",
                    "mode": "LAZY"
                }, {

I have stepped through the OnAttach method for the view and everything looks good (including stepping through the Vaadin code to see that the response got sent without any apparent exception).

So, the questions is: What did I screw up?

Solution

  • It turns out that we have some necessary customization of the VaadinServletService request handlers. That code worked fine in v14, but left the request handlers in a bad state in v24, which resulted in the failed bootstrapping.

    Fixing that problem enables a successful bootstrap and the view displays as expected.