Parsing error: x-invalid-end-tag

[sunhaoxiang]

Info

• Platform: macOS 10.13.2
• Vetur version: 0.11.5
• VS Code version: 1.19.0

Problem

[eslint-plugin-vue]
[vue/no-parsing-error]
Parsing error: x-invalid-end-tag

Reproducible Case

I used iview

<template>
    <div>
        <Form>
            <FormItem>
                <Input type="text" v-model="value">
                </Input>
            </FormItem>
        </Form>
    </div>
</template>

worked fine in 0.11.3

[HerringtonDarkholme]

Please do provide a reproduction example.

[sunhaoxiang]

I have updated a reproduction example.
Thanks for the hard work.

[maxdobeck]

I'm seeing the parsing error as well. Using iview tag as well. Started after the recent upgrade to Visual Studio code 1.19.0 I think.

Vetur: 0.11.5
VS Code: 1.19.0
Ubuntu platform

[eslint-plugin-vue]
[vue/no-parsing-error]
Parsing error: x-invalid-end-tag.

[HerringtonDarkholme]

Actually it is a feature of eslint-plugin-vue.

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-parsing-error.md#wrench-options

Note the option x-invalid-end-tag. Input is a reserved name for void elemnt in html spec.

Please use another name or turn off vetur's template warning.

[suconghou]

Have the same problems too , @HerringtonDarkholme How can I disable this rule without affect other rules ?

[HerringtonDarkholme]

@suconghou We recommend vscode-eslint plugin.

https://github.com/vuejs/vetur/blob/master/docs/linting-error.md#linting-for-template

Turn off Vetur's template validation with vetur.validation.template: false

yarn add -D eslint eslint-plugin-vue@next

Set ESLint rules in .eslintrc.

Install ESLint plugin, add vue to eslint.validate in VS Code config

[crossz]

@HerringtonDarkholme this doesn't work for me. And the sequence of the plugins installation by yarn, and rules setting, "false" or the default "off" etc confused me quite a lot. Also, couldn't find any clue about the vetur.validation.template on the vetur plug github page. Please help.

[Emiya0306]

Info

Platform: macOS 10.13.4
Vetur version: 0.12.4
VS Code version: 1.23.1

@HerringtonDarkholme The same problem in here. Maybe we can switch off the vetur.validation.template: false, but I think it is not good idea. Can we fix this one?

[carcinocron]

Just adding my me too:

This triggers the lint error

<template>
    <p>
      <h1>
        Items
      </h1>
    </p>
</template>

Switching h1 for strong makes it go away

<template>
  <section class="container">
    <p>
      <strong>
        Items
      </strong>
    </p>
</template>

[NiuCY]

Info

Platform: macOS 10.13.4
Vetur version: 0.12.4
VS Code version: 1.23.1

@HerringtonDarkholme The same problem in here. Maybe we can switch off the vetur.validation.template: false, but I think it is not good idea. Can we fix this one?

MenuItem -> menu-item

[octref]

You should report this issue to https://github.com/vuejs/eslint-plugin-vue, or disable its template validation by configuring eslint rules like https://github.com/octref/veturpack/blob/master/.eslintrc

[msqar]

I'm under the same error, anyone knows how to fix this? is getting really annoying! How can I disable this? I'm creating Row and Col from iViewUI and is giving me that error on the enclosing </Col>

EDIT: Seems that it can be fixed by using for some ui elements, you need to add the prefix i-

[fujiayishally]

Try this:

// .eslintrc.js
module.exports = {
//...
 rules: {
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
  }
}

Then you need to run your project again.

[aesyondu]

Just adding my me too:

This triggers the lint error

<template>
    <p>
      <h1>
        Items
      </h1>
    </p>
</template>

Switching h1 for strong makes it go away

<template>
  <section class="container">
    <p>
      <strong>
        Items
      </strong>
    </p>
</template>

Just had the same issue. I thought about it for a bit and realized that maybe it doesn't make sense to put h1,h2,... inside a p tag.

[carcinocron]

Just had the same issue. I thought about it for a bit and realized that maybe it doesn't make sense to put h1,h2,... inside a p tag.

If that's the case, then the error message should say that.

[jiangqiming]

i have the same question, need your help, wu wu wu~~~

[kirillgroshkov]

Same issue for this simple code: <p><div></div></p>

UPD: "fixed" it by replacing it with <div style="margin: 16px 0"><div></div></div>

[janisskuja]

I'm having this exact issue... don't want to replace the p tag with div though.

[mechanicworld]

Are there any different options that someone has without replacing <p></p> with <div></div>