Can't use recursive component

Describe the bug

When I try to use a recursive component (a component that imports itsefl) I get the following error : RecursiveComponent.vue:9 Uncaught ReferenceError: Cannot access 'RecursiveComponent' before initialization

Reproduction

Repo here : https://github.com/nicolas-t/bug-report-vite-recursive-component

Steps to reproduce :

• yarn install
• yarn dev
• Open browser’s console to see the error

System Info

• vite version: 2
• Operating System: Ubuntu
• Node version: 12.18.2
• Package manager (npm/yarn/pnpm) and version: yarn 1.22

Thanks

[yyx990803]

The self-importing syntax, although works, doesn’t mean you can eagerly access the imported binding:

import foo from '/foo.js'

console.log(foo)

export default {
  msg: 'hello'
}

Here it will result in the same error in the browser over a vanilla http server because foo is accessed before the module itself can be initialized.

However this will work:

import foo from '/foo.js'

export default {
  msg: 'hello'
}

setTimeout(() => {
  console.log(foo)
}, 0);

But again, this is

1. Not a Vite bug
2. Unnecessary to get recursive components (just use < RecursiveComponent> and it just works)

[yyx990803]

FYI you don’t need to do this. In Vite Vue SFCs can implicitly reference themselves by file name (without .vue extension).