Server restart is required after removing a file from the theme 'components' folder

[Artur-]

Description of the bug / feature

If you delete e.g. frontend/themes/components/vaadin-button.css, webpack compilation will then fail with

ERROR in ./themes/myproject/components/vaadin-button.css
Module build failed (from ../node_modules/@vaadin/theme-loader/theme-loader.js):
Error: ENOENT: no such file or directory, open '/.../frontend/themes/myproject/components/vaadin-button.css'

Minimal reproducible example

1. https://start.vaadin.com/?preset=prerelease&dl
2. Add vaadin-button.css to the folder
3. mvn
4. Remove vaadin-button.css from the folder

Expected behavior

The theme is recompiled without the button css

Versions:

- Vaadin / Flow version: 19 alpha 5

[caalador]

#9596

[pleku]

The documented limitation says that manual refresh in browser is needed (https://github.com/vaadin/docs/blob/latest/articles/theming/creating-a-custom-theme.asciidoc#limitations), and this is not enough as the error doesn't go away after refresh and a manual webpack restart is needed instead. Also the documentation is not clear that some removals cause errors

Note | Any changes to theme folder contents (add/remove files, file modifications) are automatically picked up by webpack. If a running application has live reload available, you can wait for it to reload the changes, otherwise, you can manually refresh the browser.

So by minimum, we should look into a) fixing the documented limitation b) figuring out if we can catch the failure somehow and force a restart or improve the error message somehow ?

[pleku]

To be investigated more - we should be able to pick the removal of the file before webpack compilation and react to that, or then make sure that our plugin is not causing the failure due to the missing file. Timeboxed investigation for this is a good way to start.

[mshabarov]

I reproduced this issue with starter app from start.vaadin.com using Vaadin 20.0.0.alpha7 and latest Flow snapshot 7.0-SNAPSHOT and also with Jetty server.
There was no need for me to restart the server, but only the click on the Webpack error overlay (spring-boor case):

However, for running in Jetty, there was no error overlay at all.
In both cases I was able to continue my work with styles further.

Regarding the issue itself, tried to recognise the component styles file event and then delete theme-mytheme.generated.js, or clear its content. I also tried remove-files-webpack-plugin plugin to delete this file before compilation.

But it didn't work, and it seems that webpack keeps the dependency to deleted file anyway in its dependency graph, and there is no API to invalidate/clear this graph, at least from the plugin context. So, as soon as the developer deletes the component css file, it is too late to change theme-mytheme.generated.js - webpack will throw in any case.

As a small workaround for this issue, I propose to recommend devs to delete theme-mytheme.generated.js file in one go with the component styles file. This brings an inconvenience and maybe bad UX, but it at least lets get rid of server restart and annoying error messages.

Also, I made it so that the warning message is shown if only component style is being deleted, explaining what goes wrong, how to react to it, and what is a workaround.

Docs will be updated accordingly.

[vaadin-bot]

This ticket/PR has been released with platform 14.6.0.rc1. For prerelease versions, it will be included in its final version.

[vaadin-bot]

This ticket/PR has been released with platform 19.0.7. For prerelease versions, it will be included in its final version.

[vaadin-bot]

This ticket/PR has been released with platform 20.0.0.beta2. For prerelease versions, it will be included in its final version.