Vue-next: variables declared in `<script setup>` can clash with with component names

[robertmoura]

Version

3.0.2

Reproduction link

https://codesandbox.io/s/imported-components-clash-with-exported-properties-cigf4

Steps to reproduce

1. Create the script setup
2. Export a constant named test: export const test = 'button'
3. Import a component and register it as test

What is expected?

The test component and constant should be seperate.

What is actually happening?

The constant becomes the component. So if the test constant was a string with the value button, the component becomes a button.

---

I ran into this problem while trying to register a component called Node with a required prop called node. This doesn't seem to occur with the options API.

[unbyte]

as a workaround, capitalize component name <Test name="Broken component"> This content shouldn't be showing up </Test>

[yyx990803]

Note the following is using the updated <script setup> syntax but the same behavior applies.

This is expected behavior, you could legit have a variable that is a valid tag or component definition and use it like this, e.g.:

<script setup>
import { ref } from 'vue'
const tagToRender = ref('button')
</script>

<template>
  <tagToRender @click="tagToRender = 'div'">click</tagToRender>
</template>

The component name matching doesn't differentiate between an imported binding or a local variable, since technically anything can be a component, and it always prioritizes the exact casing match first.

Better yet, don't have a variable that has the same name as an imported component (with different casing). I don't think this is going to happen often anyway.