Can't have a stateful component in root page

StarpTech commented 5 years ago

Marko Version: 4.15.2

class {

}

<lasso-page/>
<app-layout>
  <@title>${input.product.name}</@title>
  <@head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <meta name="description" content=""/>
    <lasso-head/>
  </@head>
  <@header>
    <app-header/>
  </@header>
  <@body>
    <app-product-details product=input.product compatibleProducts=input.compatibleProducts breadcrumbItems=input.breadcrumbItems/>
    <app-robot-bundle/>
    <lasso-body/>
  </@body>
  <@footer>
    <section class="container">
      <app-footer/>
    </section>
  </@footer>
</app-layout>

Error in frontend:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.
    at insertBefore (http://127.0.0.1:8081/static/product-details/marko$4.15.4/src/morphdom/helpers.js:8:21)
    at createFragmentNode (http://127.0.0.1:8081/static/product-details/marko$4.15.4/src/morphdom/fragment.js:67:3)
    at indexServerComponentBoundaries (http://127.0.0.1:8081/static/product-details/marko$4.15.4/src/components/init-components-browser.js:57:24)
    at HTMLDocument.<anonymous> (http://127.0.0.1:8081/static/product-details/marko$4.15.4/src/components/init-components-browser.js:281:11)

StarpTech commented 5 years ago

The reason is that I need a root node for my component but in that case I can't wrap the <html> (app-layout) because it would break my page.

StarpTech commented 5 years ago

The workaround is to manage the state in another top level component instead in root page component.

I can't find it anywhere in the docs. That's a mess. There are so many edge-cases without proper error messages.

StarpTech commented 5 years ago

This seems already a known limitation in marko https://github.com/marko-js/marko/wiki/Error:-Stateful-components-cannot-contain--html-,--head--or--body--tags

marko-js / marko

Can't have a stateful component in root page #1290

Marko Version: 4.15.2