vite: Vue SFC compiles incorrectly after update

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

When a .vue file is being updated and rebuilt, component disappears from the page, an error is printed into the console. Doesn’t occur with e.g. TSX components.

Disable cache is on.

Reproduction

Create an app with yarn create vite-app;
yarn; yarn dev;
See that everything works, here’s the response for App.vue file:

import HelloWorld from '/src/components/HelloWorld.vue'

const __script = {
  name: 'App',
  components: {
    HelloWorld
  }
}

import { updateStyle } from "/vite/hmr"

import { render as __render } from "/src/App.vue?type=template"
__script.render = __render
__script.__hmrId = "/src/App.vue"
__script.__file = "/home/sh7dm/vite-app/src/App.vue"
export default __script
//# sourceMappingURL=data:application/json; <encoded source map>

4. Make any change in `App.vue`, e.g. add and remove whitespace. Save the file. HMR reloads the component;

Component disappeared! [Vue warn]: Component is missing template or render function. at <App> is printed to the console;
Reload the page. Nothing changes. The response for App.vue file looks like this:

const __script = {}
import { updateStyle } from "/vite/hmr"

__script.__hmrId = "/src/App.vue"
__script.__file = "/home/sh7dm/vite-app/src/App.vue"
export default __script

No template (render fn) import as well as no source map.

Restart Vite dev server. The page is reloaded with the correct content.

System Info

required vite version: 0.20.5
required Operating System: Manjaro GNOME, Fedora Workstation 32
required Node version: 14.3.0
Optional:
- npm/yarn version: npm 6.14.5/ yarn 1.22.4 (used to create and run project)
- Installed vue version (from yarn.lock or package-lock.json): 3.0.0-beta.14
- Installed @vue/compiler-sfc version: 3.0.0-beta.14

Logs (Optional if provided reproduction)

vite v0.20.5
  vite:config env mode: development +0ms
  vite:config env: {} +1ms
  vite:optimize Hash is consistent. Skipping. Use --force to override. +0ms

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://<IP>:3000/

  vite:server server ready in 140ms. +0ms
  vite:hmr ws client connected +0ms
  vite:hmr         / imports /src/main.js +51ms
  vite:rewrite (skipped) / +0ms
  vite:rewrite /src/main.js: rewriting +27ms
  vite:rewrite     "vue" --> "/@modules/vue.js" +1ms
  vite:hmr         /src/main.js imports /@modules/vue.js +28ms
  vite:rewrite     "./App.vue" --> "/src/App.vue" +1ms
  vite:hmr         /src/main.js imports /src/App.vue +1ms
  vite:rewrite     "./index.css" --> "/src/index.css?import" +0ms
  vite:hmr         /src/main.js imports /src/index.css +0ms
  vite:rewrite (skipped) /vite/hmr +13ms
  vite:resolve (optimized) vue.js -> node_modules/.vite_opt_cache/vue.js +0ms
  vite:rewrite /@modules/vue.js: no imports found. +26ms
  vite:sfc /home/sh7dm/vite-app/src/App.vue parsed in 63ms. +0ms
  vite:rewrite /src/App.vue: rewriting +66ms
  vite:rewrite     "./components/HelloWorld.vue" --> "/src/components/HelloWorld.vue" +1ms
  vite:hmr         /src/App.vue imports /src/components/HelloWorld.vue +106ms
  vite:hmr ws client connected +1ms
  vite:sfc /home/sh7dm/vite-app/src/App.vue parse cache hit +28ms
  vite:sfc /src/App.vue template compiled in 8ms. +8ms
  vite:rewrite (skipped) /src/App.vue?type=template +34ms
  vite:sfc /home/sh7dm/vite-app/src/components/HelloWorld.vue parsed in 2ms. +4ms
  vite:rewrite /src/components/HelloWorld.vue: rewriting +3ms
  vite:rewrite     no imports rewritten. +0ms
  vite:rewrite /src/index.css: rewriting +3ms
  vite:rewrite     no imports rewritten. +0ms
  vite:sfc /home/sh7dm/vite-app/src/components/HelloWorld.vue parse cache hit +25ms
  vite:sfc /src/components/HelloWorld.vue template compiled in 11ms. +11ms
  vite:rewrite (skipped) /src/components/HelloWorld.vue?type=template +33ms
  vite:rewrite (skipped) /src/assets/logo.png +15ms
  vite:rewrite (skipped) /favicon.ico +48ms
  vite:rewrite /src/App.vue: cache busted +4s
  vite:hmr busting Vue cache for /home/sh7dm/vite-app/src/App.vue +4s
  vite:sfc /home/sh7dm/vite-app/src/App.vue parsed in 0ms. +4s
  vite:hmr update: {
  vite:hmr   "type": "vue-reload",
  vite:hmr   "path": "/src/App.vue",
  vite:hmr   "timestamp": 1591645599878
  vite:hmr } +3ms
[vite:hmr] src/App.vue updated. (reload)
  vite:sfc /home/sh7dm/vite-app/src/App.vue parse cache hit +6ms
  vite:rewrite /src/App.vue: rewriting +9ms
  vite:rewrite     no imports rewritten. +0ms

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

Can confirm issue on Ubuntu 20.04 with latest Visual Studio Code. Tried to install using a .deb package and using Snap, no difference. Switching to a random other editor immediately fixes it. Perhaps we need to report this on the VSC side 🤔

mzgajner on Aug 24, 2020

@sh7dm VSCode with Windows 10 itself

m4rvr on Jun 9, 2020