"Component is missing template or render function" after HMR

Describe the bug

When using Vite with Vue 3, regularly a component update will cause the component to vanish from the browser page and the following error will be presented: “Component is missing template or render function”. This can be caused by a change as small as adding whitespace to the script block.

I have noticed that the issue is present across all components for me, whether they use object syntax, composition API, or the new <script setup> block. I am using TypeScript exclusively, but the root component (App.vue from the standard init script) also had the same problem despite not using TS.

Reproduction

The behavior was demonstrated in https://github.com/vuejs/vue-next/issues/1620#issuecomment-660473824 when I did a reproduction of a different bug - pay attention to the browser console. That recording uses older Vue/Vite, but the problem is reproducible for me on the latest versions.

Here is reproduction repo (it is the same as in the issue above, but I updated dependencies and checked again - error is still present). I tested the issue in Chrome and Firefox.

Steps

1. Clone repo and npm ci
2. Run npm run dev and open browser
3. Update components/HelloWorld.vue multiple times, for example adding a line break after <script>
4. See that, after several successful reloads, the component is not rendered and a warning is printed to console
5. Save the file multiple times again (even without any changes) and see that component is rendered again

Update

After some experimenting, I found that the error stems from file saving. VSCode saved files somehow differently to, say, Vim, and seems to save multiple times quickly, even without any plugins enabled.

I managed to boil the reproduction down to a script, which is now present in the reproduction repo. And so, the new steps are: 3. Execute node ./reproduce_bug.mjs 4. See that the component is not rendered and a warning is printed to browser console

Screenshots

Error:

Valid again:

System Info

• required vite version: 1.0.0-rc.3
• required Operating System: Arch Linux (x86_64 Linux 5.7.7-arch1-1)
• required Node version: 14.5.0
• Optional:
  • npm version: npm 6.14.6
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.0-rc.4
  • Installed @vue/compiler-sfc version: “@vue/compiler-core”

[Demon000]

Could a release be made? This is a pretty important issue and really annoying. It also happens with WebStorm and I couldn’t find any settings affecting how the IDE saves files to get around it.

[palerdot]

This issue still persists for people trying out Vue 3 RC. Potential fix for this issue is also still open and yet to be merged - #841. Can this issue be reopened?

I stand corrected. It seems the fix is merged here - https://github.com/vitejs/vite/pull/824.

Still, please reopen this issue till a release is made and confirmed that it fixes this issue.