The Vaadin frontend build via Vite often causes problems when working with AI coding agents:
My usual approach these days is as follows:
I have IntelliJ IDEA open to edit the Java code
The Spring Boot Vaadin app is also launched within IDEA
I use the Claude Code CLI
This results in files being modified, and Claude Code compiles them automatically
At the same time, the Vaadin devServer goes haywire because it claims files are no longer present:
[vite] Internal server error: Failed to resolve import ‘./index’ from ‘src/main/frontend/generated/vaadin.ts’. Does the file exist?
However, these frontend-related files should not be affected at all by the parallel compilation initiated by Claude Code.
Even after the Claude Code compilation has finished, the application is no longer usable because the Vite-based front-end build only throws errors and does not terminate
The application must be restarted.
How can this problem be resolved?
Is this due to the configuration of the Vite build? Can it be defined here which file changes it should only react to?
11:21:25 [vite] (client) page reload generated/vaadin.ts
11:21:25 [vite] (client) hmr update /generated/vaadin-react.tsx
11:21:25 [vite] (client) hmr update /generated/index.tsx
11:21:25 [vite] (client) page reload generated/vite-devmode.ts
11:21:25 [vite] (client) hmr update /generated/flow/Flow.tsx
11:21:25 [vite] (client) hmr invalidate /generated/flow/Flow.tsx Could not Fast Refresh ("loadComponentScript" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
11:21:25 [vite] (client) page reload generated/flow/Flow.tsx
11:21:26 [vite] (client) Pre-transform error: Failed to load url /generated/vite-devmode.ts (resolved id: /XXXX/.worktree/nfc/src/main/frontend/generated/vite-devmode.ts). Does the file exist?
11:21:26 [vite] (client) Pre-transform error: Failed to resolve import "./index" from "src/main/frontend/generated/vaadin.ts". Does the file exist?
Thanks for this fast response
But why those files are re-generated when Java runs is in the background (IDE or agent) without any frontend related changes. I assume , it’s hard to detect that there aren’t such frontend related changes, isn’t it ?
Does Claude Code really run something - in that case what?
Therefore, mvn compile is used
It’s printed in the logs, you can see the newly created *.class files, and -in the case the vite process didn’t run amok- one can see the result in the browser immediately
The issue I’m having right now is that compile also runs flow:prepare-frontend, which deletes a number of frontend files that are in use by an app that runs with hot deploy enabled. The problem seems to be that starting an app with hotdeploy generates a different set of frontend files than just running flow:prepare-frontend on its own.
The files that are removed are: vite-devmode.ts, index.tsx, vaadin-react.tsx, layouts.json, ReactAdapter.tsx
One potential cause could be setting the frontend hotdeploy configuration only in application.properties and not in the maven plugin configuration as well
