Repository navigation
"Component is missing template or render function" after HMR #610
Description
Activity
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.
Reacted by Stephan Langeveld and Cheng Zheng（郑诚）Bug is still present on Vue 3.0.0-rc.5
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?
System Info
- vite 1.0.0-rc.4
- vue 3.0.0-rc.5
- OS: Windows 10
Steps
npm init vite-app issue-testcd issue-testnpm installnpm run dev- edit
components/HelloWorld.vue, adding a line break aftercount: 0and save - do step 5 multiple times
In my case, if it diden't happen, shut down terminal and run
npm run devagainHi, same problem here with
vite 1.0.0-rc.4onFirefox 79.0 (64 bits)andUbuntu 20.04.1 LTS.System Info
- vite 1.0.0-rc.1
- vue 3.0.0-rc.1
- OS: Manjaro Linux Kernel 4.19.133-1
@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
.mjsscript 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.
@yyx990803, I managed to reproduce the bug using the updated repo with the script on the latest macOS.
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
Reacted by Vishnu Prabhu ThirugnanasambandamThe same problem happened
Is there any way to alleviate it
vite@1.0.0-rc.4
vue3.0@rc.5
OS: debian10Could 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.
Reacted by Robinson Chaplain@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).
Reacted by Ilia Borovitinov and Ray FossReacted by Robinson Chaplain7 remaining items
- added a commit that references this issue
on Sep 17, 2020 - added a commit that references this issue
on Sep 17, 2020 Thanks all guys great catch:)
Reacted by Denis L.E. FavreauGreat, 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)
- added a commit that references this issue
on Sep 21, 2020 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.
Reacted by Ugo Riboni, Giannis Koutsaftakis, Ilia Borovitinov, San Kumar, Fred Miranda, goldnead, Ben Greensmith, Ilia, Arun Kumar, Axel Couturier and 3 moreThis 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.
Reacted by Axel Couturier, Ilia and Jan HadenfeldtIs there an ETA when this is going to be released? Currently the issue still exists with the latest released version.
Reacted by Ray Foss and Janis Pritzkau@jhadenfeldt you might want to try the package
https://www.npmjs.com/package/@knightly/viteReacted by Jan HadenfeldtThe 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.
Reacted by Jan Hadenfeldt and Janis Pritzkau- added a commit that references this issue
on Nov 27, 2020 - added a commit that references this issue
on Dec 6, 2020 - locked and limited conversation to collaborators
on Jul 16, 2021
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.vuefrom 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
npm cinpm run devand open browsercomponents/HelloWorld.vuemultiple times, for example adding a line break after<script>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.mjs4. See that the component is not rendered and a warning is printed to browser console
Screenshots
Error:
Valid again:
System Info
viteversion: 1.0.0-rc.3vueversion (fromyarn.lockorpackage-lock.json): 3.0.0-rc.4@vue/compiler-sfcversion: "@vue/compiler-core"