question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SyntaxError: Void elements do not have end tags

See original GitHub issue

Prettier 1.15.3 Playground link

--parser vue

Input:

<template>
	<Input type="text" placeholder="用户名" size="large" v-model="formData.usernameModel">
		<Icon type="person" slot="prepend" :size="16"></Icon>
	</Input>
</template>

Output:

SyntaxError: Void elements do not have end tags "Input" (4:2)
  2 | 	<Input type="text" placeholder="用户名" size="large" v-model="formData.usernameModel">
  3 | 		<Icon type="person" slot="prepend" :size="16"></Icon>
> 4 | 	</Input>
    | 	^
  5 | </template>

Expected behavior:

<template>
	<Input type="text" placeholder="用户名" size="large" v-model="formData.usernameModel">
		<Icon type="person" slot="prepend" :size="16"></Icon>
	</Input>
</template>

I try the same code in prettier@1.11.1, it works.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ikatyangcommented, Jan 5, 2019

@playwolsey The fix will be available in the next release (1.16), or you can install the dev version from GitHub (npm install prettier/prettier) as a temporary workaround.

0reactions
ikatyangcommented, Jan 27, 2019

@balupton This issue is for --parser vue but it seems you’re using --parser html (index.html), which is considered HTML5 and tag names are case-insensitive there. Could you open a new issue with more details (e.g., playground link, why are tag names case-sensitive there)?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Void (empty) elements and self-closing start tags in HTML
These elements are called empty or void and only have a start tag since they can't have any content. They must not have...
Read more >
Are (non-void) self-closing tags valid in HTML5?
On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any...
Read more >
Void element - MDN Web Docs Glossary - Mozilla
In HTML, a void element must not have an end tag. For example, <input type="text"></input> is invalid HTML. In contrast, SVG or MathML...
Read more >
To close or not to close by Matias Meno | HackerNoon.com
SGML has a feature called NET (Null End Tag). This is a short notation to avoid having to close a tag when the...
Read more >
HTML Standard
1 Introduction; 2 Common infrastructure; 3 Semantics, structure, and APIs of HTML documents; 4 The elements of HTML; 5 Microdata; 6 User interaction ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found