Error at first time dev by error: Unexpected "<" when template has <script- component name or <script comment

[ryancui92]

Describe the bug

There are two cases which can cause the same error:

Using a component name starts with <script-

It happened to my project that i had a component named ScriptDevelopPane, so i use this component

<template>
  <div>
    <script-develop-pane />
    <div>Another content</div>
  </div>
</template>

HTML comment of <script-

after i got an error from the template before, i tried to comment all my template but i found the error still existed. i decided to find out the exact line which is:

<template>
  <div>
    <!-- <script-develop-pane /> -->
    <div>Another content</div>
  </div>
</template>

Then in both two situations, when i run a vitejs project by vite for the first time(which means node_modules/.vite is not existed or empty):

$ vite
 > html:/Users/ryancui/projects/vite-project/src/App.vue:2:2: error: Unexpected "<"
    2 │    <div>Another Content</div>
      ╵   ^

error when starting dev server:
Error: Build failed with 1 error:
html:/Users/ryancui/projects/vite-project/src/App.vue:2:2: error: Unexpected "<"
    at failureErrorWithLog (/Users/ryancui/projects/vite-project/node_modules/esbuild/lib/main.js:1224:15)
    at buildResponseToResult (/Users/ryancui/projects/vite-project/node_modules/esbuild/lib/main.js:936:32)
    at /Users/ryancui/projects/vite-project/node_modules/esbuild/lib/main.js:1035:20
    at /Users/ryancui/projects/vite-project/node_modules/esbuild/lib/main.js:568:9
    at handleIncomingPacket (/Users/ryancui/projects/vite-project/node_modules/esbuild/lib/main.js:657:9)
    at Socket.readFromStdout (/Users/ryancui/projects/vite-project/node_modules/esbuild/lib/main.js:535:7)
    at Socket.emit (events.js:314:20)
    at addChunk (_stream_readable.js:297:12)
    at readableAddChunk (_stream_readable.js:272:9)
    at Socket.Readable.push (_stream_readable.js:213:10)
error Command failed with exit code 1.

However, when i remove the component tag or even the whole js dependencies(e.g. change src/index.ts to aaa.ts in index.html), vite seems to be OK and successfully served in localhost:3000. Even i added the <script-develop-pane /> component to template or change back to src/main.ts later, vite had nothing wrong resolving the new changes, the page is working too...i was stuck in this issue for about a whole week.

After i knew the reason, i had checked the Vue Style Guide or W3C but i couldn't find that component name starts with script is forbidden. Maybe there is some other restrictions?

btw, i tried the same case in Vue SFC playground and it seems good?

Reproduction

This can be reproduced in latest @vitejs/app template.

https://github.com/ryancui-/vite-script-issue

Used package manager: npm | yarn

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.