Skip to content

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

Open
@Sinc63

Description

@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:
  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',

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions