Import a type with the same name as component will wrongly register it

[Yue JIN]

Describe the bug

Here is an example. MyComponent has already been registered globally. If I import the type of this component, the component will be registered locally by plugin, but MyComponent is actually undefined in this SFC which results into error

<script setup lang="ts">
import type MyComponent from 'path-to-my-component'
</script>
<template>
  <MyComponent />
</template>

Current workaround:

import type AnotherName from 'path-to-my-component'

Reproduction

https://stackblitz.com/edit/vitejs-vite-hxhqdw

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[Anthony Fu]

From my perspective, you should avoid doing that.

[Yue JIN]

In Vue 2.7 + @vitejs/plugin-vue2, importing type with the same name of a component in <script setup> doesn't cause error. Therefore, I think it may be a bug of this plugin. If it is not recommended, the correct way may be importing the value of the component and then get its type, even though this component has been registered globally.

<script setup lang="ts">
import MyComponent from 'path-to-my-component'

const component = ref<InstanceType<typeof MyComponent> | null>(null)
</script>

might help people from Google with a similar issue in Vue 2.6

[achaphiv]

I ran into a similar naming conflict with variables named after html tags:

<template>
  <footer>
    <img src="https://something" />
  </footer>
</template>

<script setup lang="ts">
const footer = ...
const img = ...
</script>

I had to downgrade unplugin-vue2-script-setup to v0.7.3.