Problem with Spring skeleton of Vaadin 24.5.4

[jalmenUAL]

Description of the bug

Hi,

I recently downloaded the latest version of Vaadin (Flow-Java-Maven-Spring) from start.vaadin.com. While working on my project, I encountered an issue when placing my views in the src/main/frontend/views folder, as README suggests. Despite several attempts, the application failed to start correctly and seemed unable to locate the views in that directory.

I am unsure whether this behavior is expected in the latest version. I tried placing the views in various other locations but was unable to resolve the issue.

Subsequently, I downloaded version 23.2 from the repository and noticed that it includes a frontend folder (as in older versions) in the root directory of the project—something that appears to be missing in version 24.5.4. After moving my views to this frontend folder, the application worked as expected.

Could you clarify whether this is an intended change in the latest version, or if there is another recommended approach for structuring the views?

Thank you in advance for your assistance.

Best regards,

Expected behavior

The application should show the default application in localhost:8080

Minimal reproducible example

Run application as default is Ok.
Create a view with New->Other->Vaadin->Vaadin 10+ Design, placing
it at src/main/frontend/views (I tested also src/main/frontend, META-INF and META-INF/frontend)
The MainView.java is not modified.
Run application does not work.

Versions

• Vaadin / Flow version: 24.5.4
• Java version: 17
• OS version: Mac OS
• Browser version (if applicable): Chrome
• Application Server (if applicable): Spring
• IDE (if applicable): Eclipse

[mshabarov]

Thanks for issue!

Vaadin 24.4 changes the default location of frontend folder from project's root folder to src/main/ folder.
But the old location should be used if you don't have frontend folder in src/main.

What kind of view/file is created by New->Other->Vaadin->Vaadin 10+ Design (Vaadin Designer plugin I guess?), is it a Lit-based view? Maybe this plugin creates a view file in the old location (./frontend/), but the application looks into new location (./src/main/frontend/) ?

Also, how the application fails to start? Do you have any server side exception or browser errors? Please also share a minimal reproducible example project.

[jalmenUAL]

What kind of view/file is created by New->Other->Vaadin->Vaadin 10+ Design (Vaadin Designer plugin I guess?), is it a Lit-based view? Yes
Maybe this plugin creates a view file in the old location (./frontend/), but the application looks into new location (./src/main/frontend/) ? No. The Vaadin designer creates the view where you select. I was aware that in older versions the root frontend folder was used. I (and my students) works with old versions of Vaadin. Since no root frontend folder exists, I selected the ./src/main/frontend/views folder (it is suggested by README located in views folder).

Starting by the first time the application (without views) is successful. But adding a view (myview.ts) in ./src/main/frontend/views the following message is shown:

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue Nov 19 17:59:07 CET 2024
There was an unexpected error (type=Internal Server Error, status=500).
java.lang.IllegalStateException: Failed to find the following files: - ./src/main/frontend/views/my-view.ts Locations searched were: - /Users/jalmen/Downloads/skeleton-starter-flow-spring-24/src/main/frontend in this project - META-INF/frontend in included JARs - META-INF/resources/frontend in included JARs Please, double check that those files exist. If you use a custom directory for your resource files instead of default frontend folder then make sure you it's correctly configured (e.g. set 'vaadin.frontend.frontend.folder' property)
com.vaadin.flow.server.ServiceException: java.lang.IllegalStateException:

Failed to find the following files:
- ./src/main/frontend/views/my-view.ts

Locations searched were:
- /Users/jalmen/Downloads/skeleton-starter-flow-spring-24/src/main/frontend in this project
- META-INF/frontend in included JARs
- META-INF/resources/frontend in included JARs

After, I deleted the view, and stop and run the application, and the message is:

[plugin:vite:import-analysis] Failed to resolve import "@vaadin/hilla-frontend" from "src/main/frontend/generated/connect-client.default.ts". Does the file exist?
/Users/jalmen/Downloads/skeleton-starter-flow-spring-24 2/src/main/frontend/generated/connect-client.default.ts:1:49
1 | import { ConnectClient as ConnectClient_1 } from "@vaadin/hilla-frontend";
| ^
2 | const client_1 = new ConnectClient_1({ prefix: "connect" });
3 | export default client_1;
at TransformPluginContext._formatError (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49255:41)
at TransformPluginContext.error (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49250:16)
at normalizeUrl (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64041:23)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64173:39
at async Promise.all (index 0)
at async TransformPluginContext.transform (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64100:7)
at async PluginContainer.transform (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)
at async loadAndTransform (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51929:27)
at async viteTransformMiddleware (file:///Users/jalmen/Downloads/skeleton-starter-flow-spring-24%202/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:61881:24
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

I also tested to put the view in ./src/main/frontend but the problem persists.

Since I solved the problem by using an earlier version of Vaadin, my intention here is merely to report the issue.

Thanks again.

[mcollovati]

What looks suspicious here is

Failed to find the following files:
./src/main/frontend/views/my-view.ts`

The log message should not report the /src/main/frontend/ but only the relative view path.

Please, double check that the Java component has the correct path in the @JsModule annotation; it should be @JsModule("./views/my-view.ts").

However, if it is @JsModule("./src/main/frontend/views/my-view.ts"), and it has been generated by the designer, I would say it is a designer bug.

[jalmenUAL]

No. It is:
@tag("my-view")
@jsmodule("./src/main/frontend/views/my-view.ts")

[jalmenUAL]

I manually manipulated the path to
@jsmodule("./views/my-view.ts")
and it works!

[mcollovati]

@jalmenUAL can you confirm that @JsModule("./src/main/frontend/views/my-view.ts") was generated by the IDE Vaadin designer plugin? If so, I'll transfer this issue to the designer repository.

[jalmenUAL]

Yes. I confirm.