Do not show full screen error dialog for syntax errors and HMR

[cpojer]

Description

I auto-save while typing in VS Code with a 30ms debounce delay. When I have VS Code and my browser side-by-side, the error dialog flashes a lot while typing because in-progress typing usually contains syntax errors. This can be a jarring and distracting experience, especially since VS Code already highlights syntax errors.

Suggested solution

Show a smaller secondary banner near the window edges when an HMR update cannot be applied due to a syntax error.

Alternative

Do not process HMR updates when there are syntax errors and silently hide them – this may be confusing to some people.

Additional context

This was discussed on Discord and it was recommended that I create an issue for it.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[patak-dev]

I think this is a good idea. We may need to introduce a new option to let people choose the overlay style. For reference, we started to discuss about the need for alternative error overlay designs in the context of runtime errors before: #6274 (comment)

[bluwy]

You could also disable the error overlay with server.hmr.overlay to hide it entirely. The errors will still be shown in the terminal. I'm not really sure if we need to maintain a separate overlay style for this case, ideally Vite should stick to one.

Maybe we could consider redesigning it in a next major if a less intrusive overlay is more desirable. (but I feel like the current one is also fine)

[patak-dev]

That is a good point. I completely overlooked setting server.hmr.overlay to false. Let's try then to redesign the overlay for Vite 5 to be less intrusive and we may not need the option as you suggest. @manucorporat also wanted to propose a few more additions to the current component to make it fully customizable so as you proposed in Discord, instead of the option, there could be userland plugins with different styles as we aren't going to be able to please everyone.

[bluwy]

Closing this in favour of server.hmr.overlay: false

[patak-dev]

For future reference, the next VS Code version will have files.autoSaveWhenNoErrors that will fix the original issue:

• Auto Save only when there are no errors in the file microsoft/vscode#189895