Compiler should error on the start of a new element with the current element unclosed, instead of onClose

[Sinc63]

Vue version

"@vue/compiler-sfc": "^3.3.7"

Link to minimal reproduction

The reproduction is in the Steps to reproduce. It's really straightforward.

EDIT:
https://play.vuejs.org/#eNp9kU9PwzAMxb9K5fPUiT+nqSAB2gEOgIBjLlVrSkaaRLFTKk397jip1u0wLZfE7/1sPSt7ePC+HCLCBipqgvZcEHL098pW61mQpxSMvTc1YzJaPShbFLbu8U7BlYJUVeRrAQs5uhX5epaFTxKG4ELG1onL42VMvpfRsAKmxtlv3ZU7clZC7VOPgsb1XhsMb561s6RgU2QnebUx7u8laxwirg5684PN7xl9R2PSFLwHJAwDKlg8rkOHPNvbz1cc5b2YvWujEfqC+YHkTEwZZ+wx2lZin3A57XPvXWBtuy/ajoyWDkuloImcMq9AfubpwurHuDflbe5TdoLpH/l5mKk=

Steps to reproduce

I'm a newbie, and tried to reorder two tags. They were consecutive and I wanted the second one nested. When I put it inside the first I got an "invalid end tag" pointing at the end of the embedded tag. It would have been really helpful if instead it had pointed to the start of that tag, and given an explicit message like: Can't start a new tag without end the previous tag" or something like that:

I had:
<q-btn
  attrs
/>
<one-tooltip
  attrs
>
  {{ tooltip }}
</one-tooltip>

I tried to change it to:

<q-btn
  attrs
  <one-tooltip
    attrs
  >
    {{ tooltip }}
  </one-tooltip>
</q-btn>

I figured out the trailing </q-btn> but the error Invalid end tag pointing at the /one-tooltip wasn't helpful. Can you make it so that when you get the <one-tooltip without me closing the <q-btn that you error on opening the tag, with a nice clear error message, rather than waiting to the onClose to tell me that mysteriously you can't find the one-tooltip to close (which is clearly very misleading).

What is expected?

Error earlier, and more meaningfully. I think that it's invalid to open the <one-tooltip without providing the > for q-btn, so that should be a syntax error that is explicit.

What is actually happening?

Misleading error message on closing the next tag, instead of on opening it.

System Info

Need to install the following packages:
  [email protected]
Ok to proceed? (y) n

Any additional comments?

Sorry. I'm an old dog trying to learn new tricks, and my exposure to Vue and js is very minimal, so I don't have anywhere near enough knowledge to build a fake example for you on a website. But I think the description is pretty clear, so I hope you can fix it anyway.

Stack trace:

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [SyntaxError]: Invalid end tag.
    at createCompilerError (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1328:17)
    at emitError (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2788:5)
    at Object.onclosetag (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2192:9)
    at Tokenizer.stateInClosingTagName (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:750:16)
    at Tokenizer.parse (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1110:16)
    at Object.baseParse (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2820:13)
    at Object.parse (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:633:23)
    at Object.parse$2 [as parse] (/var/src/ione/client/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
    at createDescriptor (/var/src/ione/client/node_modules/@vitejs/plugin-vue/dist/index.js:4005:43)
    at transformMain (/var/src/ione/client/node_modules/@vitejs/plugin-vue/dist/index.js:4350:34) {
  id: '/var/src/ione/client/src/modules/msc/components/CallIndicator.vue',
  plugin: 'vite:vue',
  loc: {
    file: '/var/src/ione/client/src/modules/msc/components/CallIndicator.vue',
    line: 60,
    column: 5
  },
  hook: 'transform',
  code: 'PLUGIN_ERROR',

[edison1105]

Please follow the issue requirement and provide a minimal reproduction.

[Sinc63]

Please follow the issue requirement and provide a minimal reproduction.

I'm an old dog. I don't use these modern new-fangled tools - my work environment consists of vi and grep. I also don't know enough about these languages to generate a new module of any sort, I just modify existing code. So creating a minimal example is beyond my knowledge.

So, instead of you dragging me into the 2020s, let's see if I can drag you back to the 1980s, where you would be happy to get a well worded problem report, giving you the example of what worked and what didn't, with a clear description of what the problem is and what the expected solution is, and then you go from there. It should be really easy for you to reproduce from my description. Just start a second tag without closing the first one at all. The error should happen on opening the second tag, not on closing it. And it should say something meaningful like can't start a new tag without closing the previous tag "q-btn".

[Sinc63]

Thanks @edison1105 for adding the example. I might even be able to do something like that in the future.
So to be clear, it would be lovely if that example would generate something like:
Cannot start a tag "span" when tag "div" is still open (7:3).
That may not be the right terminology, but you get the point. The main thing is to point at line 7 where the problem starts, instead of line 11 where the error that it's an invalid tag is really unhelpful, since the tag being closed does have a match, it just isn't being honoured in some way.

[KazariEX]

1. HTML syntax allows < to appear at the beginning of an attribute (there is a runtime error);
2. There are other syntactically valid characters that will cause runtime errors when used in property names: !, $, % and so on.

Question: If we make special handling for <, do we need to do same thing for other characters that will also cause runtime errors?

Since this is the browser behavior, I think we should not cause it to fail during compilation.