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

[drgarlic]

Describe the bug

First of all I'm not sure if that's a vite or a vue 3 issue. I'm sorry if it's the wrong repo.

So the issue is the next, when I save a file with components imported inside a <script setup> tag, like so:

<script setup>
    export { default as Card } from './Card.vue'
    export { default as Navbar } from '/src/components/Navbar.vue'
</script>

I get those errors:

[Vue warn]: Failed to resolve component: Navbar 
  at <Index> 
  at <App>
warn @ vue.js:1137
resolveAsset @ vue.js:2505
resolveComponent @ vue.js:2463
render @ Index.vue:55
renderComponentRoot @ vue.js:1634
componentEffect @ vue.js:5415
reactiveEffect @ vue.js:330
(anonymous) @ vue.js:1548
rerender @ vue.js:1541
(anonymous) @ vue.js:1598
(anonymous) @ client:60
Promise.then (async)
handleMessage @ client:59
(anonymous) @ client:40
vue.js:1137 [Vue warn]: Failed to resolve component: Card 
  at <Index> 
  at <App>

But if I use the good old technique:

<script>
import Card from './Card.vue'
import Navbar from '/src/components/Navbar.vue'

export default {
    components: {
        Card,
        Navbar
    }
}
</script>

Everything is fine.

The errors are here only when it's a template refresh like so: [vite:hmr] src/pages/Home/Index.vue updated. (template)

But if it's a full reload it finds the components successfully.

Reproduction

Do you need one ?

System Info

• required vite version: Latest
• required Operating System: Mac OS 11
• required Node version: Latest

Logs (Optional if provided reproduction)

Works:

[vite:hmr] src/pages/Home/Index.vue updated. (reload)
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parse cache hit +7ms
  vite:rewrite /src/pages/Home/Index.vue: rewriting +14ms
  vite:rewrite     "./Card.vue" --> "/src/pages/Home/Card.vue" +0ms
  vite:hmr         /src/pages/Home/Index.vue imports /src/pages/Home/Card.vue +8ms
  vite:hmr         /src/pages/Home/Index.vue imports /src/components/Navbar.vue +0ms
  vite:rewrite     "/src/pages/Home/Index.vue?type=template" --> "/src/pages/Home/Index.vue?type=template&t=1598453581887" +3ms
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parse cache hit +6ms
  vite:rewrite /src/pages/Home/Index.vue: rewriting +1ms
  vite:rewrite     "./Card.vue" --> "/src/pages/Home/Card.vue" +0ms
  vite:hmr         /src/pages/Home/Index.vue imports /src/pages/Home/Card.vue +4ms
  vite:hmr         /src/pages/Home/Index.vue imports /src/components/Navbar.vue +0ms
  vite:rewrite     "/src/pages/Home/Index.vue?type=template" --> "/src/pages/Home/Index.vue?type=template&t=1598453581887" +0ms
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parse cache hit +4ms
  vite:sfc /src/pages/Home/Index.vue template compiled in 7ms. +7ms
  vite:rewrite /src/pages/Home/Index.vue?type=template: rewriting +12ms
  vite:rewrite     "vue.js" --> "/@modules/vue.js" +0ms
  vite:hmr         /src/pages/Home/Index.vue?type=template imports /@modules/vue.js +12ms
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parse cache hit +2ms
  vite:sfc /src/pages/Home/Index.vue template cache hit +0ms
  vite:rewrite /src/pages/Home/Index.vue?type=template: rewriting +2ms
  vite:rewrite     "vue.js" --> "/@modules/vue.js" +0ms
  vite:hmr         /src/pages/Home/Index.vue?type=template imports /@modules/vue.js +2ms
  vite:hmr busting Vue cache for /Users/k/code/vue/alfred/src/pages/Home/Index.vue +3s
  vite:rewrite /src/pages/Home/Index.vue: cache busted +3s
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parsed in 8ms. +3s
  vite:hmr update: {
  vite:hmr   "type": "vue-rerender",
  vite:hmr   "path": "/src/pages/Home/Index.vue",
  vite:hmr   "changeSrcPath": "/src/pages/Home/Index.vue",
  vite:hmr   "timestamp": 1598453584472
  vite:hmr } +9ms

Fails:

[vite:hmr] src/pages/Home/Index.vue updated. (template)
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parse cache hit +4ms
  vite:sfc /src/pages/Home/Index.vue template compiled in 13ms. +14ms
  vite:rewrite /src/pages/Home/Index.vue?type=template: rewriting +27ms
  vite:rewrite     "vue.js" --> "/@modules/vue.js" +0ms
  vite:hmr         /src/pages/Home/Index.vue?type=template imports /@modules/vue.js +19ms
  vite:sfc /Users/k/code/vue/alfred/src/pages/Home/Index.vue parse cache hit +3ms
  vite:sfc /src/pages/Home/Index.vue template cache hit +0ms
  vite:rewrite /src/pages/Home/Index.vue?type=template: rewriting +3ms
  vite:rewrite     "vue.js" --> "/@modules/vue.js" +0ms
  vite:hmr         /src/pages/Home/Index.vue?type=template imports /@modules/vue.js +3ms

[underfin]

Look like it caused by export { default as Navbar } from '/src/components/Navbar.vue'.I'm not sure how happend with this.Can you provider one repo for this?

[antfu]

Please check out this section in the RFC: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md#exposing-components

[drgarlic]

Sure @underfin here it is: https://github.com/gawlk/vite-component-import-in-setup-bug-demo
Run the server, edit App.vue and then you'll see that the HelloWord component disappears

@antfu That's exactly the method that I used as you can see in the code

[underfin]

Not reproduction for this.Look like it is similar with #610. Can you provider more info with this?

[antfu]

Confirmed as a bug related to hmr or the compiler

On the first build, it resolved the component currently

import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "/@modules/vue.js"

const _hoisted_1 = /*#__PURE__*/_createVNode("img", {
  alt: "Vue logo",
  src: "/src/assets/logo.png"
}, null, -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _hoisted_1,
    _createVNode($setup["HelloWorld"], { msg: "Hello Vue 3.0 + Vite" })
  ], 64 /* STABLE_FRAGMENT */))
}

And when the template get recompiled, it lost the info knowing HelloWorld is a component from the context, and compiled to

import { createVNode as _createVNode, resolveComponent as _resolveComponent, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "/@modules/vue.js"

const _hoisted_1 = /*#__PURE__*/_createVNode("img", {
  alt: "Vue logo",
  src: "/src/assets/logo.png"
}, null, -1 /* HOISTED */)

export function render(_ctx, _cache) {
  const _component_HelloWorld = _resolveComponent("HelloWorld")

  return (_openBlock(), _createBlock(_Fragment, null, [
    _hoisted_1,
    _createVNode(_component_HelloWorld, { msg: "Hello Vue 3.0 + Vite 2" })
  ], 64 /* STABLE_FRAGMENT */))
}