Sitecore 10.3 XM Headless SXA - Placeholder "sxa-header" was not found in the current rendering data when partial designs are used

Hi Team, 

Recently i worked on one migration project where app was alrady live and working on 10.2 JSS, but it was supposed to be migrated over to 10.3 headless SXA. Team already did everything and migrated things, and it was working just fine apart from couple of things, one of them and most difficult error we were getting was below 

 "Placeholder "sxa-header" was not found in the current rendering data"

Because of above no components were getting rendered

Following steps i did initially to look into the behavior of this error

1) Checked all placeholders on next app side as well as on sitecore side, all looked ok

2) Double checked that headless layout has those placeholder in allowed place holder lists 

3) Double checked that my layoutserviceconfiguration is targeting "sxa-jss" configuration and not "jss" because we did not run jss set up command, its all was looking good and it was working fine for "headless-header. headless-main, headless-footer" placeholders, so it all looked good

4) It was observed that the issue only comes when components are put on the partial design, so also double checked that placeholder used inside partial designs are ok, and with my surprise, if you open partial design in experience editor it was all working fine and no error and components were rendered

5) So now issue was only when on actual page when partial design is referenced at that time somehow it is not able to find the component

With above findings, i knew there is some wiring with partial design which is happening at run time and which is not able to find the correct place holders to render the component

I was not able to find anything on the internet because there is no placeholder like "sxa-header" which is out of the box, and when my experience and intuition says, When you do not get any help from internet that means there is some kind of configuration issue or set up issue on our side which is causing this

6) I checked my other XM projects which i have worked on 10.3 SXA in that everything was just working find without any issues, so i was 100% sure there is some issue on our side which is causing this

7) I concentrated my investigation around the name it is showing in the error "sxa-header", i was sure that we do not have any placeholder defined with this name, so from where it is taking this name, and other information i had was when it is used with partial design it does not work

8) Because this was a migration from 10.2 and not fresh 10.3, so i also kept that in mind because otherwise it should work OOTB, so that means there is something missing in the migration process

9) With these above two info. i tried comparing my working instance with non working instance and i found some new learning which i will share here

Solution

There are five steps which you will need to remember if you are migrating 

1) In SXA, when you create a partial design, it automatically creates the corresponding placeholder  settings item with the same name as partial design (If you do not have them, either create those settings manually or delete the partial designs and create them from scratch, It should create those settings automatically) which has some crucial information about how to read the rendering inside it, I compared the structure and my 10.2 instance did not have these settings

 2) On right side is what it should create by default in your 10.3 system, now if you see below what is the wiring (i am going to create a sitecore support ticket to know the exact wiring and touch point it has, but this is what solved issue for me)

As you see, partial design signature and there is a corresponding placeholder key created automatically, this is the exact error it was giving "sxa-header" placeholder was not found

3) Now, in headless SXA, it comes up with OOTB component called "PartialDesignDynamicPlaceholder.tsx", it was giving error as it was not able to find the components put on placeholders, somehow it was pointing to "props.rendering?.params?.ph" instead of "props.rendering?.params?.sig" (see sig instead of ph) like following, this was the component from where the error was coming, and changing it to SIG worked like a charm

4) Make sure your layoutserviceconfiguration path is pointing to "sxa-jss" and not "jss", because you are using sxa, by default if you run jss set up command and if you have code first approach, it generally is set to JSS, in that also it is not able to resolve the sxa patterned partial designs.

To double check that setting, you can check in settings item like below 

or if you have jss set up command executed, you can change the <<sitename>>.config to point it to "sxa-jss" instead of "jss" by editing app configuration of layoutserviceconfiguration to "sxa-jss" in a config, if you want more info, go to My Friend's Blog  to know more what kind of issue he faced

5) It also has a wiring with your FETCH_WITH environment variable, if you have used REST pattern, you need to make a change in one of the below file, as by default it comes with "default" which is not valid, change it to "sxa-jss" like below. in our case issue was also with this, our vercel app was pointing to REST configuration and our layout-service-factory.ts file was pointing to "default" (see below screenshot, in this if FETCH_WITH is REST it should be "sxa-jss" but OOTB it is "default", so change it to make it work with REST configuration

After doing above changes, everything started working, and all partial designs were back to life and components were working just fine

I hope it will make someone's life easy, I spend considerable amount of time finding out these and resolving it.