Error when giving variable the same name as a tag in the template

[Thooto]

Hi,

It seems that when using script setup and naming a variable (either a ref or not) the same name as a tag/component present in a template, this error will be thrown (in the browser console):

Uncaught ReferenceError: p is not defined
    at eval (HelloWorld.vue?38c7:13:1)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/unplugin/dist/webpack/loaders/transform.js??ruleSet[1].rules[34].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js& (app.js:158:1)
    at __webpack_require__ (app.js:208:33)
    at fn (app.js:440:21)
    at eval (HelloWorld.vue?vue&type=script&lang=js&:5:315)
    at Module../src/components/HelloWorld.vue?vue&type=script&lang=js& (app.js:86:1)
    at __webpack_require__ (app.js:208:33)
    at fn (app.js:440:21)
    at eval (HelloWorld.vue:6:98)
    at Module../src/components/HelloWorld.vue (app.js:30:1)

Reproductible using the examples/vue-cli project

HelloWorld.vue

<script setup lang="ts">
let p = "not ok";
// let p = ref("not ok"); // Ref or not, same problem
</script>

<template>
  <p>{{ p }}</p>
</template>

Does seem to happen at any recent version of the plugin (tested 0.10.x, 0.9.3). Fails for both JS/TS.

When using classic syntax (defineComponent with setup method), no error occurs. Also, on Vue 3, this does not seem to happen either (tested with Vue 3 + vite).

It seems that the plugin mistakes the variable for a component import: (compiled output)

__sfc_main.components = Object.assign({
  p
}, __sfc_main.components);

I couldn't find anything on this, hoping I'm not creating a duplicate :)

Thanks!

[WangChong99]

Div is the same thing

ReferenceError: div is not defined

[jaw52]

fixed by https://github.com/antfu/unplugin-vue2-script-setup/pull/159