HTML Template Errors
LWC enforces valid syntax in your custom components and throws an error for a number of invalid syntaxes. The framework implements the syntax restrictions from parse5.
In LWC API version 58.0 and earlier, the following invalid syntax are returned as warnings. In VS Code, warnings appear as a popover in the editor. The offending tags are underlined with a squiggly line. When you push or deploy your code to your org, the web console displays the invalid HTML syntax warnings.
HTML validation is stricter in LWC API version 59.0 and later, returning an error where a warning was previously returned. For errors, the component code displays with red squiggly lines with a popover that explains the problem. The component can be saved locally but it can't be pushed or deployed to your org.
Starting in LWC API version 59.0 and later, the following invalid syntaxes throw an error.
You can encounter these errors when working with HTML elements.
The closing tag for a child element is missing.
The open tag for an element's close tag is missing.
Unexpected end of file in an element that can contain only text.
These errors are associated with the <!DOCTYPE> element. LWC ignores the <!DOCTYPE> element in custom components, but you might encounter this tag when working with third-party web components or libraries.
Although LWC ignores the <!DOCTYPE> tag in your template, the framework includes these syntax restrictions from its parse5 implementation.
Unexpected <!DOCTYPE> element after the <head> element or another invalid location.
Missing a <!DOCTYPE> element before other content in an HTML document.
Only <!doctype html>, <!DOCTYPE html>, or another valid <!DOCTYPE> element is supported.
These errors are associated with the <head> element. LWC ignores the <head> element in custom components, but you can encounter this tag when working with Experience Builder sites, and third-party web components or libraries.
Although LWC ignores tags like <html>, <head>, and <body>, the framework includes these syntax restrictions from its parse5 implementation.
Unexpected element after the <head> element. Place the <head> element between the <html> element and the <body> element and make sure they have matching closing tags.
Unexpected content in a <noscript> element in <head>. When used within the <head> element, the <noscript> element can only contain zero or more <link>, <style>, or <meta> elements.
Unexpected location of the open tag for the <head> element instead of directly after the <!DOCTYPE> element.
Unexpected <noscript> element within another <noscript> element.
Unexpected end of file where a closing tag is expected.
To clean up common HTML syntax errors in your code, use the lwc-codemod tool.
The tool removes:
- Excessive
if:trueandif:falseattributes on the same element - Invalid attributes from both
<template>tags
The tool also fixes errors generated during LWC HTML parsing. For example:
- An unexpected end of file
- Mismatched tags
For more information, see the lwc-codemod documentation.
See Also