Issues with Vaadin Live Reload when using Maven "compile" and "package"

Hi Community,

I recently discovered that Vaadin Live Reload is only active when I compile my Vaadin project using Maven (mvn compile). However, when I run the mvn package command, Live Reload is automatically disabled.

This behavior surprised me as I expected Live Reload to be active both during compilation and when creating the package. I wonder if this is a bug or an intended behavior.

Additionally, I have encountered another issue. When Live Reload is enabled and I make changes to the source code, error messages related to the dndConnector appear in the JavaScript console. The error message is as follows:

Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.
The error has occurred in the JS code: ‘$0, $1, return (function() { window.Vaadin.Flow.dndConnector.updateDropTarget($0)}).apply($1)’
Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.
The error has occurred in the JS code: ‘$0, $1, return (function() { window.Vaadin.Flow.dndConnector.updateDragSource($0)}).apply($1)’

To further narrow down the issue, I found that these errors do not occur when I compile the project using mvn clean, mvn compile, and mvn package, and then start the application without enabling Live Reload.

My project is based on the following technologies:

Java 17
Spring
Vaadin Framework
Maven

I would like to find out if other developers have had similar experiences and if there are ways to enable Live Reload during packaging as well. Additionally, I am interested to know if anyone has found a solution to the errors with the dndConnector.

Thank you in advance for your help and support!

Hi. Probably I have the same issue with live reload. And it seems to me it does not depend on version (used 14 and 23). I use mvn clean package and LiveReload works occasionally from time to time. I didn’t find the relation for now. Thanks for your investigation, I’ll be back after playing with mvn goals.

Hi,
I don’t understand it fully. Which version of Vaadin are you using? Which live reload ? What do you mean by it’s not enabled, do you have the Vaadin development mode in your view?

Hi,
I am using Vaadin 23 and Spring Boot 2.7.7.

When I run the Maven “clean”, “compile” goal and start the application, the live reload functionality is enabled. This means that any changes I make to the code are automatically reflected in the running application without the need to manually reload the page.

To clarify, when I run the Maven “clean”, “compile”, “package” goal and start the application, the live reload functionality is not enabled. This means that any changes I make to the code, such as CSS or JS files, require a full project restart in order for the changes to take effect. Manual reloading of the page is not sufficient to reflect the updated changes.

But which live reload is enabled (when it’s working), is it Spring Boot dev tools, JRebel, …?

Spring Boot dev tools

Normally it should work after a mvn package (it’s working on my test app). Do you have something in the logs when you run it? Do you have something specific in you pom.xml?

nothing in log. and i have no specific configs in pom.

org.springframework.boot
spring-boot-devtools
true

Hello, I’m from the same team as AS.

We had defined in our maven dev profile these goals:

com.vaadin
vaadin-maven-plugin
${vaadin.version}



prepare-frontend
build-frontend



After deleting the goal build-frontend, the live reload is available but with multiple errors (see picture).
Here is the full stacktrace:
Java live reload available: Spring Boot Devtools
Vaadin development mode initialized
Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.
The error has occurred in the JS code: ‘$0, $1, return (function() { window.Vaadin.Flow.dndConnector.updateDropTarget($0)}).apply($1)’
Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.
The error has occurred in the JS code: ‘$0, $1, return (function() { window.Vaadin.Flow.dndConnector.updateDragSource($0)}).apply($1)’
Exception is thrown during JavaScript execution. Stacktrace will be dumped separately.
The error has occurred in the JS code: ‘$0, $1, return (function() { window.Vaadin.Flow.dndConnector.updateDragSource($0)}).apply($1)’
TypeError: window.Vaadin.Flow.dndConnector is undefined (http://localhost:8080/VAADIN/generated/jar-resources/FlowClient.js line 1090 > Function:3:22)
TypeError: window.Vaadin.Flow.dndConnector is undefined (http://localhost:8080/VAADIN/generated/jar-resources/FlowClient.js line 1090 > Function:3:22)
TypeError: window.Vaadin.Flow.dndConnector is undefined (http://localhost:8080/VAADIN/generated/jar-resources/FlowClient.js line 1090 > Function:3:22)

Any hints would be great, thanks.
grafik.png

Please take a look at a pom created with start.vaadin.com - using prepare and build frontend in the same execution is not the intended usage.

I wrote “After deleting the goal build-frontend, the live reload is available but with multiple errors”. So it’s only prepare-frontend executed.

build-frontend is building the frontend as production, so no live-reload and normally no Vaadin icon in the page.

The errors are javascript errors, doesn’t seems related to the live reload, but you might have the same errors in the logs of your browser

Yes, you are right. The errors are not related to the live reload directly.
But if we execute the build-frontend the javascript errors do not appear.