Vue version

3.2.26

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBYQnV0dG9uIGZyb20gXCIuL2J1dHRvbi52dWVcIlxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPHgtYnV0dG9uIC8+IFxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNi9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM2L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsImJ1dHRvbi52dWUiOiI8dGVtcGxhdGU+XG5CdG4ge3sgeCB9fVxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbiAgbGV0IHggPSAxXG48L3NjcmlwdD4ifQ==

Steps to reproduce

Put a script setup component inside a file named button.vue or nav.vue or any name that matches an existing html element.

Use it in your application, for example as a local component:

<template>
  <my-button>Hello</my-button>
</template>

<script setup>
  import MyButton from "./button.vue"
</script>

Or as a globally registered component:

import MyButton from "./button.vue"

app.component("my-button", MyButton);

What is expected?

Works without issue, no warning on console

What is actually happening?

Many warnings on the console: Do not use built-in or reserved HTML elements as component id: button

System Info

No response

Any additional comments?

This is caused by the recently introduced inferred naming of script setup components. Vue picks the filename as a default component name, as can be seen in the repro link:

const __sfc__ = {
  name: 'button',
  // ...
}

This name is then validated against reserved names and that's why a warning is raised.

In this context, the name is actually meaningless so here are two suggestions:

1. Is it even required to validate the component name property? The same code validates the name used as a tag in app.component('this-is-validated', Button), which is good, but I'm not sure if the internal component name needs validation?
2. The compiler can pick a different default name if the filename clashes with a native element. E.g. if the file is named button.vue, generate name: 'vue-button' instead; or no name at all, as previously.

Workarounds for now:

• never use a reserved name as your SFC filename. (this can be annoying after-the-fact, e.g. we have our own component library and to be consistent we would need to rename many files, breaking all imports).
• export an explicit name in a <script> block to avoid inferred name.

Should be already fixed by 9734b31c (released in 3.2.37)

I upgraded to 3.2.37 and can confirm that the warnings are gone