flow
flow copied to clipboard
vaadin
PiT 23.2: dev-mode does not detect whether vite compilation fails
Description of the bug
When using Webpack, in the console was reported whether frontend compilation was successful or failed if there were JS errors.
----------------- Frontend compiled successfully. -----------------
or
------------------ Frontend compilation failed. ------------------
Now using Vite, it's reported that fronted was compiled correctly, and then it fails, like here
----------------- Frontend compiled successfully. -----------------
[...]
[TypeScript] Found N errors. Watching for file changes.
Expected behavior
Show this output in the case of errors in Vite compilation
------------------ Frontend compilation failed. ------------------
Minimal reproducible example
curl -s -f 'https://start.vaadin.com/dl?&preset=latest-typescript&projectName=latest-typescript' -o latest-typescript.zip
unzip latest-typescript.zip
cd latest-typescript
mvn -B -q versions:set-property -Dproperty=hilla.version -DnewVersion=1.2.0.beta2
echo foo >> frontend/routes.ts
mvn
You will see
----------------- Frontend compiled successfully. -----------------
[...]
[TypeScript] Found 4 errors. Watching for file changes.
Versions
- Vaadin / Flow version: 23.2.0.beta2
foo does trigger a TypeScript checker error though because TypeScript does not find what foo refers to. The TS checker is run after the real compilation so it does not slow down getting the result to be shown in the browser.
In the browser this is then shown as
Ok, you are right, that foo is not enough for throwing a compilation error, instead use something like class {} then you can see that TS fails, as well as JS output, in Webpack dev-mode reports the error in console but in Vite it does not.
For giving more context to this issue, we use this output in scripts like in PiT to detect that the app was compiled successfully without having to start a real browser.
Webpack
------------------ Frontend compilation failed. ------------------
: ERROR in frontend/routes.ts:65:1
: TS1211: A class declaration without the 'default' modifier must have a name.
: 63 |
: 64 |
: > 65 | class {}
: | ^^^^^
: 66 |
:
Vite
----------------- Frontend compiled successfully. -----------------
: Started Vite. Time: 1895ms
: ➜ Local: http://127.0.0.1:49369/VAADIN/
: ✘ [ERROR] Expected identifier but found "{"
:
: frontend/routes.ts:65:6:
: 65 │ class {}
: ╵ ^
:
: Build failed with 1 error:
: frontend/routes.ts:65:6: ERROR: Expected identifier but found "{"
:
: ERROR(TypeScript) A class declaration without the 'default' modifier must have a name.
If you want to detect all the problems during the build you should use -Pproduction. Then all TS problems will also terminate the build
For development, the most important is that you see the errors, both TS and JS. The browser feels like the most natural place for these. Maybe we should remove the ---- compilation succeeded or failed --- rows completely or replace them with something else that is less confusing?
yeah, if we can not detect, we need to change the message for vite to look for errors in browser But still it's inconvenient if we want to detect failures in scripts, we can figure out a way for PiT though.