vite: "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

Clone repo and npm ci
Run npm run dev and open browser
Update components/HelloWorld.vue multiple times, for example adding a line break after <script>
See that, after several successful reloads, the component is not rendered and a warning is printed to console
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”

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 9
Comments: 27 (5 by maintainers)

Commits related to this issue

fix(dev): hand file write end when change event emit in chokidar fix #610 — committed to rolldown/vite by underfin 4 years ago
fix(dev): hand file write end when change event emit in chokidar (#824) fix #610 — committed to vitejs/vite by underfin 4 years ago
fix(dev): add option passed to `chokidar` close https://github.com/vitejs/vite/issues/610#issuecomment-694445467 — committed to rolldown/vite by underfin 4 years ago
fix(dev): add watch option passed to `chokidar` (#841) close https://github.com/vitejs/vite/issues/610#issuecomment-694445467, close #1153 — committed to vitejs/vite by underfin 4 years ago
fix(hmr): better fix for #610 Previous fix introduced a 100ms minimum delay for all HMR updates which is very inefficient. — committed to vitejs/vite by yyx990803 4 years ago

Most upvoted comments

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.

+13

Demon000 on Sep 21, 2020

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.

palerdot on Oct 2, 2020

@icehaunter you’re correct.

I can reproduce the issue on Ubuntu 20.04, vite@1.0.0-rc.4, vue@3.0.0-rc.9 with Visual Studio Code (tried both regular and Insiders version, installed through snap and apt), but it immediately goes away if I switch to any other editor (tried vim, nano, PyCharm and the default Text Editor that comes with Gnome).

mzgajner on Sep 1, 2020

The easiest temporary fix is to follow these instructions and use the latest vite master locally - it’s just a local change that doesn’t require any changes to the project you’re working on.

mzgajner on Oct 14, 2020

Is there an ETA when this is going to be released? Currently the issue still exists with the latest released version.

jhadenfeldt on Oct 13, 2020

This bug can be very annoying when working with multiple nested components and changing them all at once because after that you have to go through each and make sure it renders properly by just hitting save multiple times.

icehaunter on Jul 23, 2020

@jhadenfeldt you might want to try the package https://www.npmjs.com/package/@knightly/vite

Niputi on Oct 13, 2020

Thanks all guys great catch:)

underfin on Sep 17, 2020

it’s work correct if editor changes file, but if editor replace file ( i’m using (Idea) upload on save ) it caches empty file

Quickaround fix is set timeout to reload function in serverPluginVue.js
  watcher.on('change', (file) => {
        setTimeout(()=>{
            if (file.endsWith('.vue')) {
                handleVueReload(file);
            }
        },100)

    });

or even better to configure awaitWriteFinish to watcher options in [index.ts] https://github.com/vitejs/vite/blob/f005c67f9865c8ec14a1c752d98962beb9decef5/src/node/server/index.ts#L64

something like this

        awaitWriteFinish: {
            stabilityThreshold: 100,
            pollInterval: 10
        }

Snowing on Sep 10, 2020

Could anyone leaving a comment with their environment also specify which editor they use? I still think the issue lies in a way some editors save their files and how the saving is tracked.

icehaunter on Aug 27, 2020

Same problem happened in vue@3.0.0-rc.1 & vite@3.0.0-rc.1 and windows7. I found if i restart the terminal the problem can be solved

fyZhang66 on Aug 10, 2020