Description
Vue version
"@vue/compiler-sfc": "^3.3.7"
Link to minimal reproduction
The reproduction is in the Steps to reproduce. It's really straightforward.
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:
envinfo@7.14.0
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',