Vaadin 22/23版本启动后反复触发前端无限编译循环问题求助

问题现象 #

• 项目迁移至Vaadin 22、升级到23.1.1/23.1.7版本后，应用正常启动后会无征兆进入前端无限编译循环，打断正常开发流程
• 目前已知临时方案为执行「Vaadin dance」：删除所有Vaadin、Node生成的缓存与构建产物，除业务源码外全量重建项目，单次操作耗时约30分钟，每周约触发2次，无明确复现路径，日常代码修改后重启应用就可能触发
• 故障触发与启动方式无关，命令行启动、Eclipse中启动均可能出现
• 故障时典型运行日志如下：

...
------------------ Starting Frontend compilation. ------------------
2022-07-05 19:29:59,127 INFO  [ForkJoinPool.commonPool-worker-1] com.vaadin.flow.server.frontend.FrontendTools: The project-specific Node.js version 16.13.0 is older than the required minimum version 16.14.0. Using Node.js from C:\Users\mmo\.vaadin.
2022-07-05 19:29:59,549 INFO  [ForkJoinPool.commonPool-worker-1] com.vaadin.base.devserver.AbstractDevServerRunner: Running Webpack to compile frontend resources. This may take a moment, please stand by...
2022-07-05 19:30:07,878 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [webpack-dev-server] Project is running at:
2022-07-05 19:30:07,880 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [webpack-dev-server] Loopback: http://localhost:50581/
2022-07-05 19:30:07,883 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [webpack-dev-server] On Your Network (IPv4): http://192.168.43.201:50581/
2022-07-05 19:30:07,885 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [webpack-dev-server] Content not from webpack is served from 'U:\Documents\eclipse\workspace_Vaadin\KIS-Monitoring\target\classes\META-INF\VAADIN\webapp, U:\Documents\eclipse\workspace_Vaadin\KIS-Monitoring\src\main\webapp' directory
2022-07-05 19:30:18,318 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [build-status] : Compiled.

----------------- Frontend compiled successfully. -----------------

2022-07-05 19:30:18,328 INFO  [ForkJoinPool.commonPool-worker-1] com.vaadin.base.devserver.AbstractDevServerRunner: Started Webpack. Time: 21013ms
2022-07-05 19:30:18,452 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: No issues found.
2022-07-05 19:30:22,456 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder:
2022-07-05 19:30:22,457 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: WARNING in InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate.
2022-07-05 19:30:22,460 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [build-status] 1 warning were reported.
2022-07-05 19:30:22,461 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [build-status] : Compiled.

----------------- Frontend compiled successfully. -----------------

2022-07-05 19:30:22,471 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: No issues found.
2022-07-05 19:30:22,902 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder:
2022-07-05 19:30:22,903 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: WARNING in InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate.
2022-07-05 19:30:22,910 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [build-status] 1 warning were reported.
2022-07-05 19:30:22,911 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: [build-status] : Compiled.

----------------- Frontend compiled successfully. -----------------

2022-07-05 19:30:22,921 INFO  [dev-server-output] com.vaadin.base.devserver.DevServerOutputTracker$Finder: No issues found.
...
<etc. ad infinitum...>

当前环境信息 #

• Java: 17
• Vaadin: 23.1.7
• npm: 8.15.0
• IDE: Eclipse 2022-03 (4.23.0)

根因排查与修复方案 #

按优先级从高到低操作，90%以上的同类问题可通过前两步解决：

1. 先修复Node版本不匹配问题
   日志第一行已经明确提示，当前项目使用的Node 16.13.0低于Vaadin 23要求的最低16.14.0版本，版本不兼容会直接导致webpack-dev-server的文件监听逻辑异常，误判文件变更触发重复编译。直接在系统中安装16.14.0以上的16.x LTS版本Node，配置Vaadin插件使用系统Node，不要复用用户目录下.vaadin缓存的旧版本Node即可。

2. 关闭重复的PWA InjectManifest调用
   日志中反复出现的InjectManifest重复调用警告是触发循环的直接标志。如果项目没有用到PWA离线访问能力，直接移除应用启动类上的@PWA注解，即可彻底解决插件重复执行的问题；如果需要保留PWA能力，可在自定义webpack.config.js中配置workbox插件的注入规则，限制开发模式下仅执行一次InjectManifest逻辑。

3. 修正文件监听的死循环配置
   Windows环境下Eclipse的自动构建+Vaadin开发模式默认配置很容易形成监听闭环：Eclipse自动构建会把前端资源、class文件实时拷贝到target/classes目录，而webpack-dev-server默认监听该目录下的VAADIN资源路径，文件一更新就触发重编译，编译产物写回target目录又会触发新的监听，形成死循环。
   解决方式是在application.properties中添加配置vaadin.whitelisted-packages=com/your/project/package，限制Vaadin仅扫描业务源码包，同时在webpack配置中添加watch忽略规则，排除target/classes目录下的非前端资源文件，避免Java编译输出触发前端重编译。

快速恢复方案（替代耗时的全量清理） #

出现无限循环时不需要全量删除所有依赖重建，按以下步骤操作2分钟即可恢复：

• 停掉运行中的应用
• 仅删除target/frontend目录和项目根目录下node_modules/.cache文件夹
• 执行mvn vaadin:prepare-frontend后重启应用即可

内容的提问来源于stack exchange，提问作者mmo