Skip to content

Error: Stateful components cannot contain html, head, or body tags

Jump to bottom Edit New page
Taylor Hunt edited this page Aug 2, 2019 · 2 revisions

You will see this error if you have a template that is both a stateful class component and contains <html>, <head>, or <body> elements. Marko does not currently support full-page diffing.

class {
  onCreate() { this.state = { count:0 } }
  increment() { this.state.count++ }
}

<!doctype>
<html>
<body>
  <h1>Hello, counter</h1>
  <output>${state.count}</output>
  <button on-click('increment')>++</button>
</body>
</html>

To fix this error, extract the dynamic part to a deeper portion of the tree:

// page.marko
<!doctype>
<html>
<body>
  <h1>Hello, counter</h1>
  <counter/>
</body>
</html>
// components/counter.marko
class {
  onCreate() { this.state = { count:0 } }
  increment() { this.state.count++ }
}

<output>${state.count}</output>
<button on-click('increment')>++</button>

You will also see this error if a class component renders another component with <html>, <head>, or <body>. This is most common with layout components:

// page.marko
class {
  onCreate() { this.state = { count:0 } }
  increment() { this.state.count++ }
}

<layout>
  <h1>Hello, counter</h1>
  <output>${state.count}</output>
  <button on-click('increment')>++</button>
</layout>
// components/layout.marko
<!doctype>
<html>
<body>
  <${input.renderBody}/>
</body>
</html>

To automatically fix deprecated marko syntax, try the marko migrate command from the CLI.

Add a custom sidebar
Clone this wiki locally