Vaadin：从 v18 升级到 v21：web ui 未加载
Vaadin: upgraded from v18 to v21: web ui does not load
我将使用 v18.0.2 的现有（并且正在运行！）Vaadin 应用程序升级到 v21.0.4。使用该新版本，服务器端应用程序照常启动，初始化正常，第一个请求触发前端编译（这似乎也可以正常工作，至少日志显示没有异常或错误），但是 UI只是挂起并且加载失败（页面顶部有一个蓝色的细进度条，它很快达到宽度的 50% 左右，然后变得越来越慢，然后在屏幕宽度的 90% 左右就饿死了）。
我完全不知道应该朝哪个方向检查或分析这个。任何建议或暗示这里可能有什么问题将不胜感激！
如果我需要附上任何配置或日志详细信息以帮助分析此问题，请告诉我！
后期补遗：
我在这里附上我的 vaadin_dance.cmd：
@echo off
:package_entries
set fn=package.json
echo Step 1: Going to remove unsupported Vaadin v19+ entries from %fn%:
pause
rem let user see what we do:
@echo on
type %fn% | findstr /V /C:"@vaadin/application-theme-plugin" > %fn%_1
type %fn%_1 | findstr /V /C:"@vaadin/stats-plugin" > %fn%_2
type %fn%_2 | findstr /V /C:"@vaadin/theme-live-reload-plugin" > %fn%_3
type %fn%_3 | findstr /V /C:"@vaadin/theme-loader" > %fn%_4
rem remove an already existing backup - just in case (if there were one the cp below won't work)
rm %fn%~
rem rename back to original and keep a backup:
cp -b -f %fn%_4 %fn%
rem delete the temp. files":
rm %fn%_?
@echo off
echo unsupported Vaadin v19+ entries removed from %fn%
:local_stuff
echo Step 2: Going to remove project local stuff:
pause
rem let user see what we do:
@echo on
rmdir /S /Q .\target
rmdir /S /Q .\node_modules
rmdir /S /Q .\frontend\generated
rm package.json
rm package-lock.json
rm pnpm-lock.yaml
rm pnpmfile.js
rm tsconfig.json
rm types.d.ts
rm webpack.config.js
rm webpack.generated.js
@echo off
echo project local vaadin-generated stuff removed.
:global_stuff
echo Step 3: Going to remove global stuff: removing pnpm stuff
pause
rem let user see what we do:
@echo on
rm -r -f %USERPROFILE%\.pnpm-debug.log
rm -r -f %USERPROFILE%\.pnpm-state.json
rmdir /S /Q %USERPROFILE%\.vaadin
rmdir /S /Q %USERPROFILE%\.pnpm-store
rem just in case - I encountered them here, too:
rmdir /S /Q D:\.pnpm-store
rmdir /S /Q U:\.pnpm-store
@echo off
echo global vaadin-installed stuff removed.
rem clear (and preload) default repository:
:repo_stuff
echo Step 4: Going to empty m2repository!
pause
rem let user see what we do:
@echo on
rem strange enough I again and again got "access denied" on certain .jars ||-( So we first take ownership...
takeown /R /F %USERPROFILE%\.m2\m2repository
rem ... before removing the stuff:
rm -r -f %USERPROFILE%\.m2\m2repository\*
@echo off
echo m2repository cleaned.
echo.
pause
上述 .cmd 文件的过程是这样的，我 运行 第一步，然后我停止它并尝试重建 v（在不同的 cmd window 中）。如果这不起作用，我会从开始和 运行 步骤 1 和 2 重新启动它，然后我停止并尝试重建，等等。至多在步骤 1、2、3 和 4 之后我是（至少到目前为止) 总是能够重建和执行我的应用程序。至少在使用 v18.0.3 构建或恢复到 v18.0.3 时是这样。使用 v21.x 到目前为止我还没有成功。 :-(
带有控制台输出的第二个附录：
应用程序启动正常（即没有任何错误消息（直到我看到“Tomcat 已在端口上启动：...”
那时我将我的浏览器定向到触发 DispatcherServlet 调度的那个端口。该页面永远不会加载并且浏览器超时，但是没有错误消息或任何提示重新。控制台上问题的类型或原因：
...
2021-12-17 19:36:03,459 INFO [main] org.springframework.boot.web.embedded.tomcat.TomcatWebServer: Tomcat started on port(s): 8085 (http) with context path ''
2021-12-17 19:36:23,678 INFO [http-nio-8085-exec-1] org.apache.juli.logging.DirectJDKLog: Initializing Spring DispatcherServlet 'dispatcherServlet'
2021-12-17 19:36:23,682 INFO [http-nio-8085-exec-1] org.springframework.web.servlet.FrameworkServlet: Initializing Servlet 'dispatcherServlet'
2021-12-17 19:36:23,689 INFO [http-nio-8085-exec-1] org.springframework.web.servlet.FrameworkServlet: Completed initialization in 2 ms
2021-12-17 19:36:26,103 WARN [http-nio-8085-exec-1] org.apache.juli.logging.DirectJDKLog: Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [2,172] milliseconds.
2021-12-17 19:36:26,103 WARN [http-nio-8085-exec-3] org.apache.juli.logging.DirectJDKLog: Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [1,457] milliseconds.
2021-12-17 19:36:26,179 INFO [http-nio-8085-exec-4] com.vaadin.flow.spring.SpringInstantiator: The number of beans implementing 'I18NProvider' is 0. Cannot use Spring beans for I18N, falling back to the default behavior
<Console output stops here and browser times out>
不幸的是，这里似乎无法附上屏幕截图，所以我无法在此处提供 WebDeveloper 的网络选项卡的输出...
浏览器检查器控制台显示：
Fri Dec 17 2021 19:52:01 GMT+0100 (Central European Standard Time) Atmosphere: unload event vaadinPush-min.js:1:40213
Vaadin push loaded vaadinPush-min.js:1:44231
Failed to register/update a ServiceWorker for scope ‘http://localhost:8085/’: Bad Content-Type of ‘text/html’ received for script ‘sw-runtime-resources-precache.js’. Must be a JavaScript MIME type.
Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:8085/sw.js for scope http://localhost:8085/ threw an exception during script evaluation.
Path '/login' is not properly resolved due to an error. Resolution had failed on route: '(.*)' vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58:17000
Uncaught (in promise) TypeError: class heritage e is not an object or null
to http://localhost:8085/VAADIN/build/vaadin-3-1a44b245d20aa3c33130.cache.js:1
266 http://localhost:8085/VAADIN/build/vaadin-3-1a44b245d20aa3c33130.cache.js:765
r http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
promise callback*imports http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
flowInit http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
async*get action/< http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
Z http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
__resolveRoute http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
promise callback*__resolveRoute http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
resolveRoute http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
a http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
a http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
promise callback*a http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
resolve http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
promise callback*resolve http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
render http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
__onNavigationEvent http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
setRoutes http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
<anonymous> http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
r http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
<anonymous> http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
<anonymous> http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
vaadin-3-1a44b245d20aa3c33130.cache.js:1:153
非 Vaadin 实习生应该如何解码这些东西并分析这里出了什么问题？
我得到了重复的问题，问题是在开发模式下，我在控制台中从 Flow.ts 得到了一个 400 (Bad Request) 错误响应 Error 400 Invalid location: Location parameter missing from bootstrap request to server.
解决方法是删除 ./frontend/generated 文件夹，之后应用程序可以在 运行 mvn clean jetty:run 时正常运行。但是 vaadin:clean-frontend 目标应该删除 frontend 中的 generated 文件夹，这至少对我来说是个问题。
查看inspector，看看控制台有没有异常。
我刚刚升级到 v22.0.1。使用该新版本，我的应用程序现在再次加载！令我震惊的是版本 19.0.x - 21.0.4 中的错误导致我的应用程序 UI 无法加载。
但是还有一个问题：
初始页面不是应用程序的主页，而是一些奇怪的 self-additionalManifestEntries 页面（请参阅我的附录
Vaadin v22: Odd page displayed each time after login to application)。我总是需要重新加载主页才能进入我的实际应用程序。
我将使用 v18.0.2 的现有（并且正在运行！）Vaadin 应用程序升级到 v21.0.4。使用该新版本，服务器端应用程序照常启动，初始化正常，第一个请求触发前端编译（这似乎也可以正常工作，至少日志显示没有异常或错误），但是 UI只是挂起并且加载失败（页面顶部有一个蓝色的细进度条，它很快达到宽度的 50% 左右，然后变得越来越慢，然后在屏幕宽度的 90% 左右就饿死了）。
我完全不知道应该朝哪个方向检查或分析这个。任何建议或暗示这里可能有什么问题将不胜感激！
如果我需要附上任何配置或日志详细信息以帮助分析此问题，请告诉我！
后期补遗：
我在这里附上我的 vaadin_dance.cmd：
@echo off
:package_entries
set fn=package.json
echo Step 1: Going to remove unsupported Vaadin v19+ entries from %fn%:
pause
rem let user see what we do:
@echo on
type %fn% | findstr /V /C:"@vaadin/application-theme-plugin" > %fn%_1
type %fn%_1 | findstr /V /C:"@vaadin/stats-plugin" > %fn%_2
type %fn%_2 | findstr /V /C:"@vaadin/theme-live-reload-plugin" > %fn%_3
type %fn%_3 | findstr /V /C:"@vaadin/theme-loader" > %fn%_4
rem remove an already existing backup - just in case (if there were one the cp below won't work)
rm %fn%~
rem rename back to original and keep a backup:
cp -b -f %fn%_4 %fn%
rem delete the temp. files":
rm %fn%_?
@echo off
echo unsupported Vaadin v19+ entries removed from %fn%
:local_stuff
echo Step 2: Going to remove project local stuff:
pause
rem let user see what we do:
@echo on
rmdir /S /Q .\target
rmdir /S /Q .\node_modules
rmdir /S /Q .\frontend\generated
rm package.json
rm package-lock.json
rm pnpm-lock.yaml
rm pnpmfile.js
rm tsconfig.json
rm types.d.ts
rm webpack.config.js
rm webpack.generated.js
@echo off
echo project local vaadin-generated stuff removed.
:global_stuff
echo Step 3: Going to remove global stuff: removing pnpm stuff
pause
rem let user see what we do:
@echo on
rm -r -f %USERPROFILE%\.pnpm-debug.log
rm -r -f %USERPROFILE%\.pnpm-state.json
rmdir /S /Q %USERPROFILE%\.vaadin
rmdir /S /Q %USERPROFILE%\.pnpm-store
rem just in case - I encountered them here, too:
rmdir /S /Q D:\.pnpm-store
rmdir /S /Q U:\.pnpm-store
@echo off
echo global vaadin-installed stuff removed.
rem clear (and preload) default repository:
:repo_stuff
echo Step 4: Going to empty m2repository!
pause
rem let user see what we do:
@echo on
rem strange enough I again and again got "access denied" on certain .jars ||-( So we first take ownership...
takeown /R /F %USERPROFILE%\.m2\m2repository
rem ... before removing the stuff:
rm -r -f %USERPROFILE%\.m2\m2repository\*
@echo off
echo m2repository cleaned.
echo.
pause
上述 .cmd 文件的过程是这样的，我 运行 第一步，然后我停止它并尝试重建 v（在不同的 cmd window 中）。如果这不起作用，我会从开始和 运行 步骤 1 和 2 重新启动它，然后我停止并尝试重建，等等。至多在步骤 1、2、3 和 4 之后我是（至少到目前为止) 总是能够重建和执行我的应用程序。至少在使用 v18.0.3 构建或恢复到 v18.0.3 时是这样。使用 v21.x 到目前为止我还没有成功。 :-(
带有控制台输出的第二个附录：
应用程序启动正常（即没有任何错误消息（直到我看到“Tomcat 已在端口上启动：...”
那时我将我的浏览器定向到触发 DispatcherServlet 调度的那个端口。该页面永远不会加载并且浏览器超时，但是没有错误消息或任何提示重新。控制台上问题的类型或原因：
...
2021-12-17 19:36:03,459 INFO [main] org.springframework.boot.web.embedded.tomcat.TomcatWebServer: Tomcat started on port(s): 8085 (http) with context path ''
2021-12-17 19:36:23,678 INFO [http-nio-8085-exec-1] org.apache.juli.logging.DirectJDKLog: Initializing Spring DispatcherServlet 'dispatcherServlet'
2021-12-17 19:36:23,682 INFO [http-nio-8085-exec-1] org.springframework.web.servlet.FrameworkServlet: Initializing Servlet 'dispatcherServlet'
2021-12-17 19:36:23,689 INFO [http-nio-8085-exec-1] org.springframework.web.servlet.FrameworkServlet: Completed initialization in 2 ms
2021-12-17 19:36:26,103 WARN [http-nio-8085-exec-1] org.apache.juli.logging.DirectJDKLog: Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [2,172] milliseconds.
2021-12-17 19:36:26,103 WARN [http-nio-8085-exec-3] org.apache.juli.logging.DirectJDKLog: Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [1,457] milliseconds.
2021-12-17 19:36:26,179 INFO [http-nio-8085-exec-4] com.vaadin.flow.spring.SpringInstantiator: The number of beans implementing 'I18NProvider' is 0. Cannot use Spring beans for I18N, falling back to the default behavior
<Console output stops here and browser times out>
不幸的是，这里似乎无法附上屏幕截图，所以我无法在此处提供 WebDeveloper 的网络选项卡的输出...
浏览器检查器控制台显示：
Fri Dec 17 2021 19:52:01 GMT+0100 (Central European Standard Time) Atmosphere: unload event vaadinPush-min.js:1:40213
Vaadin push loaded vaadinPush-min.js:1:44231
Failed to register/update a ServiceWorker for scope ‘http://localhost:8085/’: Bad Content-Type of ‘text/html’ received for script ‘sw-runtime-resources-precache.js’. Must be a JavaScript MIME type.
Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:8085/sw.js for scope http://localhost:8085/ threw an exception during script evaluation.
Path '/login' is not properly resolved due to an error. Resolution had failed on route: '(.*)' vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58:17000
Uncaught (in promise) TypeError: class heritage e is not an object or null
to http://localhost:8085/VAADIN/build/vaadin-3-1a44b245d20aa3c33130.cache.js:1
266 http://localhost:8085/VAADIN/build/vaadin-3-1a44b245d20aa3c33130.cache.js:765
r http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
promise callback*imports http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
flowInit http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
async*get action/< http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
Z http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
__resolveRoute http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
promise callback*__resolveRoute http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
resolveRoute http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
a http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
a http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
promise callback*a http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
resolve http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
promise callback*resolve http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
render http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
__onNavigationEvent http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
setRoutes http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
<anonymous> http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:58
r http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
<anonymous> http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
<anonymous> http://localhost:8085/VAADIN/build/vaadin-bundle-aec7d8b0cb06e0cbb6bd.cache.js:1
vaadin-3-1a44b245d20aa3c33130.cache.js:1:153
非 Vaadin 实习生应该如何解码这些东西并分析这里出了什么问题？
我得到了重复的问题，问题是在开发模式下，我在控制台中从 Flow.ts 得到了一个 400 (Bad Request) 错误响应 Error 400 Invalid location: Location parameter missing from bootstrap request to server.
解决方法是删除 ./frontend/generated 文件夹，之后应用程序可以在 运行 mvn clean jetty:run 时正常运行。但是 vaadin:clean-frontend 目标应该删除 frontend 中的 generated 文件夹，这至少对我来说是个问题。
查看inspector，看看控制台有没有异常。
我刚刚升级到 v22.0.1。使用该新版本，我的应用程序现在再次加载！令我震惊的是版本 19.0.x - 21.0.4 中的错误导致我的应用程序 UI 无法加载。
但是还有一个问题：
初始页面不是应用程序的主页，而是一些奇怪的 self-additionalManifestEntries 页面（请参阅我的附录
Vaadin v22: Odd page displayed each time after login to application)。我总是需要重新加载主页才能进入我的实际应用程序。