Live Reload Issue

Omey1 · June 3, 2024, 11:50am

Hi - not new to Vaadin Flow, but this is my first venture into using Hilla

I used the Vaadin Start to create a simple Hilla project.

When I start the server, everything works and I am able to browse to the default landing page as expected.

The moment I make a change, triggering the reload, I get the following error:

 ERROR(TypeScript)  Cannot find module 'Frontend/generated/connect-client.default.js' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/vaadin.ts:28:20

     26 | import '@vaadin/icons/vaadin-iconset.js';
     27 | import '@vaadin/icon/vaadin-icon.js';
   > 28 | import client from 'Frontend/generated/connect-client.default.js';
        |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     29 | let generatedId = 0;
     30 | const copilotMiddleware: any = async function(
     31 |   context: any,
 
  ERROR(TypeScript)  Cannot find module 'Frontend/generated/endpoints.js' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/views/@index.tsx:6:35

    4 | import { Notification } from '@vaadin/react-components/Notification.js';
    5 | import { TextField } from '@vaadin/react-components/TextField.js';
  > 6 | import { HelloWorldService } from 'Frontend/generated/endpoints.js';
      |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 |
    8 | export const config: ViewConfig = {
    9 |   menu: { order: 0, icon: 'line-awesome/svg/globe-solid.svg' },
 
[TypeScript] Found 2 errors. Watching for file changes.

After, this the page shows an error. The only way to continue, is the stop and start the server.

I have tried to delete the node_modules folder - but same error once the live reload takes place.

Any help would be appreciated.

Thanks!

Leif · June 3, 2024, 12:34pm

This sounds as though the frontend/generated directory or at least some of its contents somehow gets deleted when you make changes. Could you verify if that’s the case by manually checking that it’s there before making a file change and whether it’s still there after the change?

Various files in that directory are supposed to be re-generated at startup or removed if they are no longer needed but I don’t see why that would happen for redeploys. Could you clarify what version of Hilla you’re using, how you’re launching the server and what IDE you’re using?

Omey1 · June 3, 2024, 3:19pm

Versions
Java : 21
Vaadin/Hilla: 24.4.0.beta5

Eclipse IDE for Enterprise Java and Web Developers (includes Incubating components)
Version: 2023-12 (4.30.0)
Build id: 20231201-2043

Launch Method
Run As → Spring Boot App

Upon launch the files are there:

Upon reload, the files are still there, but the error is generated

Based on the timestamp, the files are being regenerating, is it possible that some process is attempting to access those files before they finish generating?

I have also confirmed that the same problem happens if I start the server in the powershell outside of Eclipse.

PS D:\Sandbox-Hilla-2024\my-app> ./mvnw
[INFO] Scanning for projects...
[INFO]
[INFO] -------------------< com.example.application:my-app >-------------------
[INFO] Building my-app 1.0-SNAPSHOT
[INFO] --------------------------------[ jar ]---------------------------------

Also, here is my pom.xml

<?xml version="1.0" encoding="UTF-8"?>

4.0.0

com.example.application
my-app
my-app
1.0-SNAPSHOT
jar

<properties>
    <java.version>21</java.version>
    <vaadin.version>24.4.0.beta5</vaadin.version>
</properties>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.2.6</version>
</parent>

<repositories>
    <repository>
        <id>vaadin-prereleases</id>
        <url>https://maven.vaadin.com/vaadin-prereleases</url>
        <snapshots>
            <enabled>true</enabled>
        </snapshots>
    </repository>
</repositories>

<pluginRepositories>
    <pluginRepository>
        <id>vaadin-prereleases</id>
        <url>https://maven.vaadin.com/vaadin-prereleases</url>
        <snapshots>
            <enabled>true</enabled>
        </snapshots>
    </pluginRepository>
</pluginRepositories>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
    </dependency>
    <dependency>
        <groupId>org.parttio</groupId>
        <artifactId>line-awesome</artifactId>
        <version>2.0.0</version>
    </dependency>


    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <defaultGoal>spring-boot:run</defaultGoal>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>

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

<profiles>
    <profile>
        <!-- Production mode is activated using -Pproduction -->
        <id>production</id>
        <dependencies>
            <!-- Exclude development dependencies from production -->
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-core</artifactId>
                <exclusions>
                    <exclusion>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-dev</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
        </dependencies>
        <build>
            <plugins>
                <plugin>
                    <groupId>com.vaadin</groupId>
                    <artifactId>vaadin-maven-plugin</artifactId>
                    <version>${vaadin.version}</version>
                    <executions>
                        <execution>
                            <goals>
                                <goal>build-frontend</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>
</profiles>

Leif · June 4, 2024, 6:23am

A timing issue might explain the first two errors with connect-client.default and endpoints but there’s also a third error in the screenshot with file-routes and that file seems to have gone missing from the file system based on the file listings that you shared (unless it’s further down in the list).

There are thus two mysteries on my mind:

Why are connect-client.default and endpoints re-generated in this case? Those files need to be updated if you make changes to Java code but not if you make changes to only frontend files.
Is file-routes missing and why is that? It should instead only be updated if you make changes to files in frontend/views.

Could you see if there’s any clues about those files in the console output from the server?

Omey1 · June 4, 2024, 10:15am

Looks like there are two scenarios.

Scenario #1

On a full stop and start of the server, this is the file list:

I make a change to Index.html → the live reload takes place. This is the resulting file list:

A bunch of files are now missing.

Scenario #2

On a full stop and start of the server, the file list goes back to correct content.

I make a change to HelloWorldService.java → the live reload takes place.
This is the resulting file list:

Here is the console log:


  __  __            _                
 |  \/  |_   _     / \   _ __  _ __  
 | |\/| | | | |   / _ \ | '_ \| '_ \ 
 | |  | | |_| |  / ___ \| |_) | |_) |
 |_|  |_|\__, | /_/   \_\ .__/| .__/ 
         |___/          |_|   |_|    

 Starting Application using Java 21.0.1 with PID 18992 (D:\Sandbox-Hilla-2024\my-app\target\classes started by Omey in D:\Sandbox-Hilla-2024\my-app)
 No active profile set, falling back to 1 default profile: "default"
 Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable
 For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG'
 Tomcat initialized with port 8080 (http)
 Starting service [Tomcat]
 Starting Servlet engine: [Apache Tomcat/10.1.24]
 Initializing Spring embedded WebApplicationContext
 Root WebApplicationContext: initialization completed in 1201 ms
 Initializing AtmosphereFramework
 Search for subclasses and classes with annotations took 1094 ms
 Starting dev-mode updaters in D:\Sandbox-Hilla-2024\my-app folder.
 Visited 104 classes. Took 27 ms.
 Skipping `npm install` because the frontend packages are already installed in the folder 'D:\Sandbox-Hilla-2024\my-app\node_modules' and the hash in the file 'D:\Sandbox-Hilla-2024\my-app\node_modules\.vaadin\vaadin.json' is the same as in 'package.json'
 LiveReload server is running on port 7127
 
Vaadin is running in DEVELOPMENT mode - do not use for production deployments.
 The number of beans implementing 'I18NProvider' is 0. Cannot use Spring beans for I18N, falling back to the default behavior
 Tomcat started on port 8080 (http) with context path ''
 Started Application in 6.779 seconds (process running for 7.939)
 Search for endpoints in directories [D:\Sandbox-Hilla-2024\my-app\target\classes]
 Copying frontend resources from jar files ...
 Visited 21 resources. Took 108 ms.
 Starting Vite
------------------ Starting Frontend compilation. ------------------
;39m Running Vite to compile frontend resources. This may take a moment, please stand by...
 The directory of route files: file:///D:/Sandbox-Hilla-2024/my-app/src/main/frontend/views/
 The directory of generated files: file:///D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/
 The output directory: file:///D:/Sandbox-Hilla-2024/my-app/target/classes/META-INF/VAADIN/webapp
 Collected file-based routes
 Frontend route list is generated: file:///D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/file-routes.json
 File Route module is generated: file:///D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/file-routes.ts
 
   VITE v5.2.10  ready in 3190 ms
----------------- Frontend compiled successfully. -----------------

 Started Vite. Time: 4624ms
   ➜  Local:   http://127.0.0.1:7137/VAADIN/
 Initializing Spring DispatcherServlet 'dispatcherServlet'
 Initializing Servlet 'dispatcherServlet'
 Completed initialization in 1 ms
 
 [TypeScript] Found 0 errors. Watching for file changes.
 Restarting due to 1 class path change (0 additions, 0 deletions, 1 modification)
  __  __            _                
 |  \/  |_   _     / \   _ __  _ __  
 | |\/| | | | |   / _ \ | '_ \| '_ \ 
 | |  | | |_| |  / ___ \| |_) | |_) |
 |_|  |_|\__, | /_/   \_\ .__/| .__/ 
         |___/          |_|   |_|    

 Starting Application using Java 21.0.1 with PID 18992 (D:\Sandbox-Hilla-2024\my-app\target\classes started by Omey in D:\Sandbox-Hilla-2024\my-app)
 No active profile set, falling back to 1 default profile: "default"
 Tomcat initialized with port 8080 (http)
 Starting service [Tomcat]
 Starting Servlet engine: [Apache Tomcat/10.1.24]
 Initializing Spring embedded WebApplicationContext
 Root WebApplicationContext: initialization completed in 271 ms
 Initializing AtmosphereFramework
 Search for subclasses and classes with annotations took 678 ms
 Starting dev-mode updaters in D:\Sandbox-Hilla-2024\my-app folder.
 Visited 104 classes. Took 10 ms.
 
  ERROR(TypeScript)  Cannot find module 'Frontend/generated/connect-client.default.js' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/vaadin.ts:28:20
 
     26 | import '@vaadin/icons/vaadin-iconset.js';
     27 | import '@vaadin/icon/vaadin-icon.js';
   > 28 | import client from 'Frontend/generated/connect-client.default.js';
        |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     29 | let generatedId = 0;
     30 | const copilotMiddleware: any = async function(
     31 |   context: any,
 
  ERROR(TypeScript)  Cannot find module 'Frontend/generated/endpoints.js' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/views/@index.tsx:6:35
 
     4 | import { Notification } from '@vaadin/react-components/Notification.js';
     5 | import { TextField } from '@vaadin/react-components/TextField.js';
   > 6 | import { HelloWorldService } from 'Frontend/generated/endpoints.js';
       |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     7 |
     8 | export const config: ViewConfig = {
     9 |   menu: { order: 0, icon: 'line-awesome/svg/globe-solid.svg' },
 
 [TypeScript] Found 2 errors. Watching for file changes.
 Skipping `npm install` because the frontend packages are already installed in the folder 'D:\Sandbox-Hilla-2024\my-app\node_modules' and the hash in the file 'D:\Sandbox-Hilla-2024\my-app\node_modules\.vaadin\vaadin.json' is the same as in 'package.json'
 Search for endpoints in directories [D:\Sandbox-Hilla-2024\my-app\target\classes]
 LiveReload server is running on port 7127
 
  ERROR(TypeScript)  Cannot find module 'Frontend/generated/file-routes' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/routes.tsx:37:24
 
     35 | import { RouterConfigurationBuilder } from '@vaadin/hilla-file-router/runtime.js';
     36 | import Flow from 'Frontend/generated/flow/Flow';
   > 37 | import fileRoutes from 'Frontend/generated/file-routes';
        |                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     38 |
     39 | export const { router, routes } = new RouterConfigurationBuilder()
     40 |     .withFileRoutes(fileRoutes) // (1)
 
  ERROR(TypeScript)  Cannot find module 'Frontend/generated/endpoints.js' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/views/@index.tsx:6:35
 
     4 | import { Notification } from '@vaadin/react-components/Notification.js';
     5 | import { TextField } from '@vaadin/react-components/TextField.js';
   > 6 | import { HelloWorldService } from 'Frontend/generated/endpoints.js';
       |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     7 |
     8 | export const config: ViewConfig = {
     9 |   menu: { order: 0, icon: 'line-awesome/svg/globe-solid.svg' },
 
 [TypeScript] Found 2 errors. Watching for file changes.
 The number of beans implementing 'I18NProvider' is 0. Cannot use Spring beans for I18N, falling back to the default behavior
 Tomcat started on port 8080 (http) with context path ''
 Started Application in 3.774 seconds (process running for 130.234)
 Condition evaluation unchanged
 Copying frontend resources from jar files ...
 Visited 21 resources. Took 74 ms.
 Reusing Vite running at http://127.0.0.1:7137
 [vite] Pre-transform error: Failed to resolve import "Frontend/generated/file-routes" from "src/main/frontend/generated/routes.tsx". Does the file exist?
 
  ERROR(TypeScript)  Cannot find module 'Frontend/generated/file-routes' or its corresponding type declarations.
  FILE  D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/routes.tsx:37:24
 
     35 | import { RouterConfigurationBuilder } from '@vaadin/hilla-file-router/runtime.js';
     36 | import Flow from 'Frontend/generated/flow/Flow';
   > 37 | import fileRoutes from 'Frontend/generated/file-routes';
        |                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     38 |
     39 | export const { router, routes } = new RouterConfigurationBuilder()
     40 |     .withFileRoutes(fileRoutes) // (1)
 
 [TypeScript] Found 1 error. Watching for file changes.
 [vite] Pre-transform error: Failed to resolve import "Frontend/generated/file-routes" from "src/main/frontend/generated/routes.tsx". Does the file exist?
 Initializing Spring DispatcherServlet 'dispatcherServlet'
 Initializing Servlet 'dispatcherServlet'
 Completed initialization in 1 ms
 [vite] Internal server error: Failed to resolve import "Frontend/generated/file-routes" from "src/main/frontend/generated/routes.tsx". Does the file exist?
   Plugin: vite:import-analysis
   File: D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/routes.tsx:37:23
   1  |  import { RouterConfigurationBuilder } from "@vaadin/hilla-file-router/runtime.js";
   2  |  import Flow from "Frontend/generated/flow/Flow";
   3  |  import fileRoutes from "Frontend/generated/file-routes";
      |                          ^
   4  |  export const { router, routes } = new RouterConfigurationBuilder().withFileRoutes(fileRoutes).withFallback(Flow).protect().build();
   5  |  
       at formatError (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:50824:46)
       at TransformContext.error (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:50818:19)
       at normalizeUrl (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66141:33)
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
       at async file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66296:47
       at async Promise.all (index 2)
       at async TransformContext.transform (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66217:13)
       at async Object.transform (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51133:30)
       at async loadAndTransform (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:53888:29)
       at async viteTransformMiddleware (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:63759:32)
 [vite] Internal server error: Failed to resolve import "Frontend/generated/file-routes" from "src/main/frontend/generated/routes.tsx". Does the file exist?
   Plugin: vite:import-analysis
   File: D:/Sandbox-Hilla-2024/my-app/src/main/frontend/generated/routes.tsx:37:23
   1  |  import { RouterConfigurationBuilder } from "@vaadin/hilla-file-router/runtime.js";
   2  |  import Flow from "Frontend/generated/flow/Flow";
   3  |  import fileRoutes from "Frontend/generated/file-routes";
      |                          ^
   4  |  export const { router, routes } = new RouterConfigurationBuilder().withFileRoutes(fileRoutes).withFallback(Flow).protect().build();
   5  |  
       at formatError (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:50824:46)
       at TransformContext.error (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:50818:19)
       at normalizeUrl (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66141:33)
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
       at async file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66296:47
       at async Promise.all (index 2)
       at async TransformContext.transform (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:66217:13)
       at async Object.transform (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51133:30)
       at async loadAndTransform (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:53888:29)
       at async viteTransformMiddleware (file:///D:/Sandbox-Hilla-2024/my-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:63759:32)

Same issue takes place if I make a change to @index.tsx

marcoc_753 · June 5, 2024, 9:33am

This could maybe be because Eclipse might automatically run the maven prepare-frontend goal during compilation, that in turns cleans up generated files.
If this is the case, it should have been fixed in Vaadin 24.4.0.beta6.

Omey1 · June 5, 2024, 10:35am

Thanks Marco.

Can you confirm that 24.4.0.beta6 is available?

marcoc_753 · June 5, 2024, 11:04am

Ah, sorry.
Flow 24.4.0.beta6 is out, but Vaadin platform in not yet releasd.

Leif · June 6, 2024, 9:33am

Vaadin 24.4.0.rc1 has now been released. It would be great if you could see if it helps with the issues that you have experienced.

Omey1 · June 6, 2024, 4:41pm

Excellent! 24.4.0.rc1 is working as expected.

Thank you very much - appreciate the support in getting this going.

Onward!