Frontend problems in Vaadin 25 rc2

Flow
1

Hi,

I ran into frontend problems after upgrading from Vaadin 25 rc1 to rc2, and now I can’t run in dev mode even though I go all sorts of cleaning before building…

I started using the mvn clean vaadin:clean-frontend and then a full rebuild with mvn clean package -Pproduction
The production build was successful but then when running in dev mode I get lots of errors in the browser console, such as:

?continue:8  Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.
console.error @ ?continue:8
Iu @ FlowClient-OusBWxKa.js:7498
Hu @ FlowClient-OusBWxKa.js:6130
Ru @ FlowClient-OusBWxKa.js:8997
zC @ FlowClient-OusBWxKa.js:5603
Xr @ FlowClient-OusBWxKa.js:7619
ns @ FlowClient-OusBWxKa.js:8758
dl @ FlowClient-OusBWxKa.js:3852
ml @ FlowClient-OusBWxKa.js:8213
ho @ FlowClient-OusBWxKa.js:8450
(anonymous) @ FlowClient-OusBWxKa.js:5443
Promise.then
On @ FlowClient-OusBWxKa.js:5442
Fn @ FlowClient-OusBWxKa.js:3280
ol @ FlowClient-OusBWxKa.js:8218
al @ FlowClient-OusBWxKa.js:974
Wk @ FlowClient-OusBWxKa.js:6602
Yk @ FlowClient-OusBWxKa.js:2448
vl @ FlowClient-OusBWxKa.js:8235
d2 @ FlowClient-OusBWxKa.js:2948
_k @ FlowClient-OusBWxKa.js:3406
Or @ FlowClient-OusBWxKa.js:6010
Pr @ FlowClient-OusBWxKa.js:7833
Qr @ FlowClient-OusBWxKa.js:7131
$p @ FlowClient-OusBWxKa.js:8589
(anonymous) @ FlowClient-OusBWxKa.js:6914
Eb2 @ FlowClient-OusBWxKa.js:1644
Hb2 @ FlowClient-OusBWxKa.js:4958
(anonymous) @ FlowClient-OusBWxKa.js:2609
_f @ vaadinPush.js?v=dc30fa0e1f91dcb6179e2fd1e9e4fa8b72fdbe6f90c2b3033e0b3c14a9123120:2853
_invokeFunction @ vaadinPush.js?v=dc30fa0e1f91dcb6179e2fd1e9e4fa8b72fdbe6f90c2b3033e0b3c14a9123120:2842
_invokeCallback @ vaadinPush.js?v=dc30fa0e1f91dcb6179e2fd1e9e4fa8b72fdbe6f90c2b3033e0b3c14a9123120:2980
_websocket.onmessage @ vaadinPush.js?v=dc30fa0e1f91dcb6179e2fd1e9e4fa8b72fdbe6f90c2b3033e0b3c14a9123120:1494
?continue:8  The error has occurred in the JS code: '$0, if ($0) window.Vaadin.Flow.gridConnector.initLazy($0)'

Which additional steps should I do to make sure the dev bundle is up to date?
I usually see “Building dev bundle” in the browser but could not see that now…

(BTW: I have vaadin.frontend.hotdeploy set to false)

2

Exactly the same issue here. I have tried literally everything including a raindance to make my application start in development mode but no dice. I don’t think it’s related to rc1->rc2 upgrade as this was v24->v25 migration. And, additionally, this upgrade worked fine for some of our other applications. Using the Vaadin Intellij plugin ‘Debug using hotswapagent’ after doing a normal commandline ‘mvn clean install’ . Is there debug logging I can enable to see why exactly Vaadin thinks it should not start in development mode ?

(BTW: I have vaadin.frontend.hotdeploy set to false)

I have it set to true.

Maven config:

<plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-maven-plugin</artifactId>
        <version>${vaadin.version}</version>
        <configuration>
          <ciBuild>false</ciBuild>
          <forceProductionBuild>true</forceProductionBuild>
          <reactEnable>false</reactEnable>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>prepare-frontend</goal>
              <goal>build-frontend</goal>
            </goals>
            <phase>compile</phase>
          </execution>
        </executions>
      </plugin>
3

Is there a way to reproduce this in a starter project or some other project that is available outside your hard drives?

When you do a production build, it creates a flow-build-info.json file that gets included in the jar/war. This json contains

{
  "productionMode" : true,
...
}

when the production build is finished, the json file is deleted again so that it is not available when starting in dev mode, e.g. from the IDE.

There is one known issue related to using mvnd where the file might not be deleted: consider alternative strategy for removing the tokenfile in maven plugin · Issue #21021 · vaadin/flow · GitHub

4

It turned out to be a problem with the SelectionGrid component that stopped working for some reason.

I’ll check why, and may notify @Sergey.81 if something really broke since he updated it for Vaadin 25.

1 Like
5

I can consistently reproduce it so if you tell me what to check I can do this. And moreover, rolling back to our Vaadin 24.x branch the project is not starting in development mode either anymore. So, it’s something in the environment, or IntelliJ plugin I would say. I’m not a Vaadin novice and i’m at the end of things to try.

6

I was NOT able to reproduce the problem with a small example using Vaadin 25 and the SelectionGrid (selection-grid-flow 4.0.0)…

The problem now is that I have no clue why my application fails since I don’t see any compile errors when it generates the frontend bundle, but in the browser console there are lots of exceptions related to the grid:

FlowClient-OusBWxKa.js:349  Uncaught TypeError: grid._createPropertyObserver is not a function
    at window.Vaadin.Flow.gridConnector.initLazy (generated-flow-imports-RO4Ocbzx.js:64383:8)
    at Object.eval (eval at Iu (FlowClient-OusBWxKa.js:7491:13), <anonymous>:3:42)
    at Iu (FlowClient-OusBWxKa.js:7492:11)

Any suggestions how to troubleshoot this?

7

First of all, I would delete src/main/bundles if that exists. mvn clean won’t remove old development bundles from src

8

I did all of that, resorted to step-debugging through the startup process and found the culprit !

It turns out that we have a dependency on the classpath (overcoded.io / panel-for-vaadin · GitLab) which contains a flow-build-info.json file containing productionMode:true. At the absence of a flow-build-info.json in the regular places, Vaadin starts scanning the classpath for such file and uses it if found.