Error: Unrecognized Tag

ℹ️ Not expecting a tag? If you're writing text at the root of a template, remember, Marko starts in concise mode, where any text not prefixed with -- is parsed as a tag declaration.

When Marko encounters an unrecognized tag at compile time, it will throw an error by default. For example:

<invalid-tag />

[template.marko:0:1] Unrecognized tag: invalid-tag

While erroring on unrecognized tags lets Marko catch potential problems as early as possible, it does require that Marko be aware of all possible tag names: standard HTML elements, Marko UI components, and custom HTML elements.

Importing other Marko UI components

Marko will only discover tags from packages that are listed under dependencies or devDependencies in your package.json file. If the tag name looks correct, please make sure you have the package installed and listed.

Web Components (aka AMP Components, custom elements)

For tags you wish to pass through transparently, without Marko looking up a corresponding .marko template, you can tell Marko not to process certain tag names with an html-elements.json file.

For example, say we want to use the Accelerated Mobile Pages’ <amp-app-banner> Web Component. To register its custom element, create a html-elements.json in the same directory or a higher-up directory as the template containing the tag name, then register the tag as shown below.

src/components/hello/index.marko:

<amp-app-banner layout="nodisplay" id="demo-app-banner-2134">

src/components/hello/html-elements.json:

{
  "<amp-app-banner>": {}
}

With that hint, the Marko compiler will not complain that the <amp-app-banner> tag is unrecognized and instead output the tag as if it was a standard HTML tag.