Vite: "Component is missing template or render function" after HMR

[icehaunter]

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:

1. Execute node ./reproduce_bug.mjs
2. 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"
  
  

[icehaunter]

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]

Bug is still present on Vue 3.0.0-rc.5

[yyx990803]

This is quite weird as I've never ran into this and I can't reproduce it even using the exact dependencies in your repro (via npm ci) on macOS. This may be a Linux only problem?

For other people upvoting this issue - could you share your system environment?

[Ltyi]

System Info

• vite 1.0.0-rc.4
• vue 3.0.0-rc.5
• OS: Windows 10

Steps

1. npm init vite-app issue-test
2. cd issue-test
3. npm install
4. npm run dev
5. edit components/HelloWorld.vue, adding a line break after count: 0 and save
6. do step 5 multiple times

In my case, if it diden't happen, shut down terminal and run npm run dev again

[daidais]

Hi, same problem here with vite 1.0.0-rc.4 on Firefox 79.0 (64 bits) and Ubuntu 20.04.1 LTS.

[natasher]

System Info

• vite 1.0.0-rc.1
• vue 3.0.0-rc.1
• OS: Manjaro Linux Kernel 4.19.133-1

[icehaunter]

@yyx990803, I tried to make the issue more reproducible. I took to docker and tired out multiple versions of the node. After bug reproduced easily for me on any recent version, I tried paying attention to how I edit the file. Turned out, using Vim/Nano does not reproduce the bug: only using VSCode does, even without any extensions enabled.

Blaming VSCode is strange because it's just an editor, so I thought that it differs in working with files somehow. And so, I found a stable reproduction case (at least for me). It was added to the original repo as a .mjs script to be run with node after starting the server. What it does, is it adds and then removes a line break in a script section of the file without any delay. I think that those quick consecutive saves are what is causing the problem because as soon as I run the script, error immediately shows up in the browser console.

I don't know who should investigate the issue: it might be Vite's file watching bug, or it might be an undocumented behaviour of VSCode. If the issue is still not reproducible for you, please let me know, I'll try some over OS's and try to pinpoint the issue.

[icehaunter]

@yyx990803, I managed to reproduce the bug using the updated repo with the script on the latest macOS.

[Eskimo6666]

Same problem happened in [email protected] & [email protected] and windows7. I found if i restart the terminal the problem can be solved

[au-top]

The same problem happened
Is there any way to alleviate it
[email protected]
vue3.[email protected]
OS: debian10

[icehaunter]

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.

[mzgajner]

@icehaunter you're correct.

I can reproduce the issue on Ubuntu 20.04, [email protected], [email protected] 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).

[Snowing]

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)

    });

[x-N0]

Looks like @icehaunter is right.
I can reproduce the issue on Windows 10 [email protected], [email protected] with VSC.
Goes away if I switch to Webstorm.

[Snowing]

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
        }

[x-N0]

@Snowing First solution seems to solve the issue, thanks.

• I solved this issue editing my node_modules>vite>dist>node>server>serverPluginVue.js.
• Didn't tested editing the index.js.

You should send a PR.

[underfin]

Has other guys reslove it via https://github.com/vitejs/vite/issues/610#issuecomment-690133270 ?

[x-N0]

The fix could broke when installing a package, just to point it out.
Any permanent fix intended by the dev team, @underfin?

[jjdive]

Has other guys reslove it via #610 (comment) ?

I can confirm that resolves the issue. It was also happening to me while using vscode but after adding

awaitWriteFinish: {
  stabilityThreshold: 100,
  pollInterval: 10
}

to vite/dist/node/server/index.js the warning didn't show up again and my webapp worked fine (It's ok to guess this will be the only outcome of adding the option in vite/src/node/server/index.ts before building for npm, right?).

I tested with and without the fix alternatively during some periods of my work time, never saw the issue while using the awaitWriteFinish option as described by @Snowing.

Thanks a lot! Already having fun with vite

[underfin]

Thanks all guys great catch:)

[dominikg]

Great, this could be the solution to some annoying test-suite timeouts i got in svite when writing files with node fs.

Did you test the settings with slow hardware (eg. old 5400rpm hdd under load)? The chosen values for awaitWriteFinish seem a bit low.
There are also some open issues about this setting on chokidar repo: https://github.com/paulmillr/chokidar/issues?q=is%3Aissue+is%3Aopen+awaitWriteFinish (not working on windows, symlink problem on linux).

Could it be possible to expose the watcher setup/config so users can optimize it for their platform/needs? (with sensible defaults ofc)

[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 - https://github.com/vitejs/vite/pull/841. Can this issue be reopened?

[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.

[jhadenfeldt]

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

[Niputi]

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

[mzgajner]

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.