Placeholder was not found in the current rendering data - JSS sitecore 9 with VueJs

Question

• In Disconnected mode
• JSS Tech Preview 3
• Sample vue JS

I have a component : data/component-content/Footer-nav With an ID : ID__footer-nav

I can link all my pages to this component perfectly:

"PH__footer": [
    {
        "id": "ID__footer-nav"
    }
]

Nevertheless, if I create a new placeholder inside this component

<placeholder name="PH__footer-col" :rendering="rendering" />

and add data in my Footer-nav/en.json, I have this error in my console.log:

#Placeholder 'PH__footer-col' was not found in the current rendering data
{
  "uid": "{3FC3DAE1-AA1D-5D7E-997D-9AB58DFFE0F9}",
  "componentName": "FooterNav",
  "dataSource": "available-in-connected-mode",
  "params": {},
  "fields": {
      #(... I hide them for clarity ...)
  }
}

• My data are in my manifest
• If I put my data in routes/en.json (bellow the ID) instead of routes/component-content/Footer-nav/en.json, I have not this problem.

Any ideas ?

Thanks!

Answer 1

Based on a Slack conversation just now, the issue here was that the expectation was that using an ID reference to pull in a shared component content would also pull in child layout.

ID references in a route are shared content references, but do not support child placeholders within the ID-referenced component (i.e. you cannot define placeholders on something in /data/component-content).

Placeholders can be defined on the route item that refers to the shared content item under the ID reference, e.g.:

- id: component-shared-id
  placeholders:
    PH__footer-col:
    - id: footer-shared-1

Answer 2

I had this same error today and in my instance it was due to my adding a new placholder to the layout (code first) and not adding it to the rootPlaceholders setting in package.json (AFAIK this is only referenced in the JSS 11 release notes)