SXA headless with (partial) design: placeholder not found

Question

I am using Sitecore 10.3 with SXA and JSS. For the head setup I used a post from Dan Cruickshank and that worked fine. I did get a nice blank homepage and no errors.

I created 3 partial designs and added those to a design which I linked to the default page template. So far still fine. But as soon as I add components to any of the partial designs it goes wrong. It seems to be a mismatch in placeholder naming, but not sure how to fix it - especially since this is still all out-of-the-box SXA and the starter template.

The error in the logs are "placeholder 'sxa-header' was not found in the current rendering data" (I named the partial "header"). It's a very typical error in JSS setups but I don't know how and where to fix this in SXA 10.3.

What I noticed:

• when I create a partial design "header", a placeholder setting item is created with the same name and a placeholder key "sxa-header".
• when I add components in this partial design, those components are added in the placeholders that are defined in the layout file which are called like "headless-header"

The rendered layout as seen in the graphql ui looks like:

"headless-header": [
   {
     "uid": "36add71b-256e-4af8-9a76-6b764e0013d4",
     "componentName": "PartialDesignDynamicPlaceholder",
     "dataSource": "",
       "params": {
         "sid": "{5C0F944B-5573-471D-824B-9BF6AF058FB0}",
         "ph": "headless-header",
         "sig": "sxa-header"
      }
    }
  ],

So I have a ph which is consistent with the placeholder and a sig which refers to the placeholder key in the local (site) placeholder settings item.

I tried several things (things that I should not be doing in a standard SXA setup but just to debug and understand the issue) but nothing worked so far.

The error comes from the PartialDesignDynamicPlaceholder component. This uses indeed the sig parameter: <Placeholder name={props.rendering?.params?.sig || ''} rendering={props.rendering} />.

I assume I am just missing something silly, but I'm not sure what and can't find something in the documentation. Any ideas?

Small update: I managed to get rid of the errors by adding the placeholders to the "Layout Service Placeholders" field of the "PartialDesign Dynamic Placeholder" rendering. Which is something I should not be doing manually (especially as I need to use raw values tricks to add them). But I still get an empty page so now I have no errors and no data :(

Answer 1

We literally had the same problem with SC10.3, SXA and JSS 21.0. The issue was due two things:

1. In .\src\lib\layout-service-factory.ts change the configurationName property from default to sxa-jss. Probably JSS should handle the default value based on the site configuration, but it did not work for us.
2. When I did that, the LayoutService started throwing 500s due to not having the master DB configured (the JSS app was connecting to the CD server). The issue was in this config App_Config\Modules\JSS SXA\Foundation\Sitecore.XA.JSS.Foundation.Presentation.config, namely, in having no transform for the CD server here:

<config name="sxa-jss">
<requestContext type="Sitecore.LayoutService.Configuration.DefaultRequestContext, Sitecore.LayoutService">
<databaseName>master</databaseName>  <-- HERE
</requestContext>

We ended up creating a config override like this:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
    <sitecore>
        <layoutService>
            <configurations>
                <config name="sxa-jss">
                    <requestContext type="Sitecore.LayoutService.Configuration.DefaultRequestContext, Sitecore.LayoutService">  
                        <databaseName role:require="ContentDelivery">
                            <patch:delete />
                        </databaseName>
                        <databaseName role:require="ContentDelivery">web</databaseName>
                    </requestContext>
                </config>
            </configurations>
        </layoutService>
    </sitecore>
</configuration>

Answer 2

Find the detailed answer on my blog here.

https://daivagnananavati.blogspot.com/2023/06/sitecore-103-xm-headless-sxa.html

As this is resolved, I am putting it here so if anyone from the community wants to refer the can refer to this as an answer for our use case.

Issue was.

1. The app was migrated from 10.2 to 10.3 headless SXA
2. In headless SXA, for partial design to work, when you create a partial design, it should also automatically create the corresponding placeholder items too, so your partial design contains the signature ID which is automatically generated i.e if you create a header partial design it will have signature id as "header" (you can change it but not advisable)
3. Your placeholder items that got created will have prefix as "sxa" so the placeholder key name will be sxa-header sxa-<<signature name>>
4. So when you put your components on partial design it uses this signature to identify the component because in your react (nextjs) site the component name is PartialDesignDynamicPlaceholder.tsx it reads this "sig" param as props.rendering?.params?.sig to resolve those components and render them

in our case, as it was migrated from 10.2 serialized content did not have those placeholder keys, so those keys had to be created manually in order to work with SXA, to resolve this issue we did two things

1. All placeholder keys item we created which should match the signature and sig as I mentioned above
2. Our PartialDesignDynamicPlaceholder.tsx file was targeting "ph" instead of "sig" so changed that to "sig" and everything came to life

Thanks

Answer 3

I was also facing the same error while using Sitecore 10.3 with SXA and JSS and was able to resolve that by one simple configuration change.

What was the issue

In my case I have created one partial design named "wwwheader", added this to the page design and linked that page design to my home page. In that partial design I added one of my json rendering, when I was trying to open my home page in EE I was getting the hydrating error and in logs I was having "Placeholder 'sxa-wwwheader' was not found in the current rendering data" error.

Debugging

After some debugging I noticed that this issue is coming in one of the JavaScript files (Placeholder.js) added by Sitecore-jss-react node package, None of the sxa renderings were getting the placeholders, In my case sxa-wwwheader

When I checked the [your front end app name ].config file (in my case it was jss-nextjs-app) inside my Sitecore local instance path inetpub\wwwroot\sitecorejss103sc.dev.local\App_Config\Include\zzz there is one node for "Jss App Registration" and this jss app needs to be registered in order to support layout service and import services. There are many available attributes, and they inherit the defaults if not explicitly specified here. Defaults are defined in /App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config

When I checked the values in /App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config my layoutServiceConfiguration was only "jss", and that was the reason why I was not getting any sxa placeholder.

Solution

Change the value of layoutServiceConfiguration from "default" to "sxa-jss" in inetpub\wwwroot\sitecorejss103sc.dev.local\App_Config\Include\zzz\jss-nextjs-app.config.

Answer 4

two things

1. I am using sitecore XM 10.3 only and have same JSS version but it works just fine on my machine and the layout service JSON is showing same details (attached image), and everything is working, page is resolving fine for us

2. You must have it but just double checking, you installed next-sxa for nextjs side? could be possible that sxa-header is not understood because of that reason or its entry not being there component definition on next side?