"Component is missing template or render function" after HMR #610

icehaunter · 2020-07-23T07:53:17Z

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 vuejs/core#1620 (comment) 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"

The text was updated successfully, but these errors were encountered:

icehaunter · 2020-07-23T07:54:57Z

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 · 2020-07-30T05:20:34Z

Bug is still present on Vue 3.0.0-rc.5

yyx990803 · 2020-07-30T19:15:40Z

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 · 2020-07-31T07:08:27Z

System Info

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

Steps

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

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

mrDlef · 2020-08-01T15:50:28Z

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

natasher · 2020-08-03T14:01:30Z

System Info

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

icehaunter · 2020-08-09T09:45:49Z

@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 · 2020-08-09T10:32:59Z

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

fyZhang66 · 2020-08-10T06:54:13Z

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

au-top · 2020-08-25T18:13:55Z

The same problem happened
Is there any way to alleviate it
vite@1.0.0-rc.4
vue3.0@rc.5
OS: debian10

icehaunter · 2020-08-27T08:28:46Z

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 · 2020-09-01T13:52:23Z

@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).

Snowing · 2020-09-10T09:56:05Z

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 · 2020-09-10T10:02:51Z

Looks like @icehaunter is right.
I can reproduce the issue on Windows 10 vite@1.0.0-rc.4, Vue@3.0.0-rc.10 with VSC.
Goes away if I switch to Webstorm.

Snowing · 2020-09-10T10:12:29Z

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]

vite/src/node/server/index.ts

Line 64 in f005c67

const watcher = chokidar.watch(root, {

something like this

        awaitWriteFinish: {
            stabilityThreshold: 100,
            pollInterval: 10
        }

x-N0 · 2020-09-10T11:17:44Z

@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 · 2020-09-10T11:41:28Z

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

x-N0 · 2020-09-15T03:49:57Z

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

jjdive · 2020-09-16T23:38:39Z

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

fix vitejs#610

fix #610

underfin · 2020-09-17T08:43:30Z

Thanks all guys great catch:)

dominikg · 2020-09-17T19:19:25Z

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)

close vitejs#610 (comment)

Demon000 · 2020-09-21T08:08:06Z

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 · 2020-10-02T15:40:19Z

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?

palerdot · 2020-10-02T15:46:42Z

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 - #824.

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

jhadenfeldt · 2020-10-13T21:12:38Z

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

Niputi · 2020-10-13T21:24:36Z

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

mzgajner · 2020-10-14T07:07:15Z

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.

close #610 (comment), close #1153

Previous fix introduced a 100ms minimum delay for all HMR updates which is very inefficient.

icehaunter added the pending triage label Jul 23, 2020

yyx990803 added cannot reproduce The bug cannot be reproduced and removed pending triage labels Jul 30, 2020

underfin mentioned this issue Aug 28, 2020

Can't find component on template refresh when importing component in script setup #748

Closed

underfin added a commit to rolldown/vite that referenced this issue Sep 17, 2020

fix(dev): hand file write end when change event emit in chokidar

cdac398

fix vitejs#610

underfin mentioned this issue Sep 17, 2020

fix(dev): hand file write end when change event emit in chokidar #824

Merged

underfin closed this as completed in #824 Sep 17, 2020

underfin added a commit that referenced this issue Sep 17, 2020

fix(dev): hand file write end when change event emit in chokidar (#824)

a8f9595

fix #610

underfin added a commit to rolldown/vite that referenced this issue Sep 21, 2020

fix(dev): add option passed to chokidar

98151bc

close vitejs#610 (comment)

underfin mentioned this issue Sep 21, 2020

fix(dev): add option passed to chokidar #841

Merged

palerdot mentioned this issue Oct 2, 2020

Vue 3 Support - Getting a Component is missing template or render function with Vue 3 RC palerdot/vue-speedometer#17

Closed

underfin added a commit that referenced this issue Nov 27, 2020

fix(dev): add watch option passed to chokidar (#841)

a73c29b

close #610 (comment), close #1153

yyx990803 added a commit that referenced this issue Dec 6, 2020

fix(hmr): better fix for #610

3634042

Previous fix introduced a 100ms minimum delay for all HMR updates which is very inefficient.

github-actions bot locked and limited conversation to collaborators Jul 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Component is missing template or render function" after HMR #610

"Component is missing template or render function" after HMR #610

icehaunter commented Jul 23, 2020 •

edited

Loading

icehaunter commented Jul 23, 2020

icehaunter commented Jul 30, 2020

yyx990803 commented Jul 30, 2020 •

edited

Loading

Ltyi commented Jul 31, 2020

mrDlef commented Aug 1, 2020

natasher commented Aug 3, 2020

icehaunter commented Aug 9, 2020

icehaunter commented Aug 9, 2020

fyZhang66 commented Aug 10, 2020

au-top commented Aug 25, 2020 •

edited

Loading

icehaunter commented Aug 27, 2020

mzgajner commented Sep 1, 2020

Snowing commented Sep 10, 2020

x-N0 commented Sep 10, 2020

Snowing commented Sep 10, 2020

x-N0 commented Sep 10, 2020

underfin commented Sep 10, 2020

x-N0 commented Sep 15, 2020

jjdive commented Sep 16, 2020

underfin commented Sep 17, 2020

dominikg commented Sep 17, 2020

Demon000 commented Sep 21, 2020

palerdot commented Oct 2, 2020

palerdot commented Oct 2, 2020

jhadenfeldt commented Oct 13, 2020

Niputi commented Oct 13, 2020

mzgajner commented Oct 14, 2020

"Component is missing template or render function" after HMR #610

"Component is missing template or render function" after HMR #610

Comments

icehaunter commented Jul 23, 2020 • edited Loading

Describe the bug

Reproduction

Steps

Update

Screenshots

System Info

icehaunter commented Jul 23, 2020

icehaunter commented Jul 30, 2020

yyx990803 commented Jul 30, 2020 • edited Loading

Ltyi commented Jul 31, 2020

System Info

Steps

mrDlef commented Aug 1, 2020

natasher commented Aug 3, 2020

System Info

icehaunter commented Aug 9, 2020

icehaunter commented Aug 9, 2020

fyZhang66 commented Aug 10, 2020

au-top commented Aug 25, 2020 • edited Loading

icehaunter commented Aug 27, 2020

mzgajner commented Sep 1, 2020

Snowing commented Sep 10, 2020

x-N0 commented Sep 10, 2020

Snowing commented Sep 10, 2020

x-N0 commented Sep 10, 2020

underfin commented Sep 10, 2020

x-N0 commented Sep 15, 2020

jjdive commented Sep 16, 2020

underfin commented Sep 17, 2020

dominikg commented Sep 17, 2020

Demon000 commented Sep 21, 2020

palerdot commented Oct 2, 2020

palerdot commented Oct 2, 2020

jhadenfeldt commented Oct 13, 2020

Niputi commented Oct 13, 2020

mzgajner commented Oct 14, 2020

icehaunter commented Jul 23, 2020 •

edited

Loading

yyx990803 commented Jul 30, 2020 •

edited

Loading

au-top commented Aug 25, 2020 •

edited

Loading