6

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 :(

6
  • 1
    Do you have an "Impersonation User" set on your "API Key" item under "/sitecore/system/Services/API Keys"? If you do, check this user access right across the content tree. If it has restricted access to some content, renderings, placeholder settings, SXA settings items, etc., it could cause this type of issue. Commented Jan 9, 2023 at 13:47
  • No, no user set. Just * for cors and controllers.
    – Gatogordo
    Commented Jan 10, 2023 at 15:34
  • Just tested the same scenario on XMCloud and there it works fine.
    – Gatogordo
    Commented Jan 11, 2023 at 16:30
  • 1
    I am also facing the same issue with Partial design. I am also using sitecore 10.3. Did you get to fix this issue?
    – Deepa
    Commented Jan 20, 2023 at 21:53
  • No. Didn't contact Sitecore Support about it yet though - I assume that needs to be done to get a solution.
    – Gatogordo
    Commented Jan 22, 2023 at 19:22

4 Answers 4

4

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>
2
  • One more thing that we encountered as well. For JSS to recognize nested placeholders, a corresponding placeholder item needs to exist in <path_to_site>/Presentation/Placeholder Settings/Partial Designs. We didn't have the Partial Designs folder at first so placeholder settings were not being created for Partial Designs. We had to create the folder manually and recreate the Partial Designs.
    – VadimG
    Commented Mar 17, 2023 at 20:11
  • For anyone else that runs across this, Sitecore Support has confirmed that this is a bug with the Content Delivery server for Headless SXA. On Content Delivery servers you can delete the entire <requestContext /> element in the sxa-jss configuration to fix this, or replace the databaseName with web as @VadimG has shown here. Sitecore has given 578367 as the public reference number for this bug. Commented Feb 21 at 21:04
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

1

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.

enter image description here

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

enter image description here

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 enter code here

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.

0

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

enter image description here

  1. 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?
2
  • Can confirm I've installed JSS with the next-sxa template and this placeholder issue with page/partial design still occurs. I've also set layoutServiceConfiguration="sxa-jss". Commented Feb 12, 2023 at 13:56
  • Can spend sometime if you want to connect and see how it is on our end, but seems some kind of configuration issue or configuration being missed which is headless SXA specific Commented Feb 13, 2023 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.