Skip to main content

Troubleshooting Sitecore 10.3 XP Headless SXA Next.js : Handling No component rendering/Missing 'sxa-header' Placeholder in Partial Designs

The issue I encountered

In my scenario, I created a partial design named "Header" which generated a Signature "header" and a Placeholder Item named "Header" with the Placeholder Key "sxa-header". 




I integrated partial design into the page design, and linked this page design to my home page. However, when I tried to access my home page in the Experience Editor, I observed that no components were rendering.

Note : When creating a partial design, it should automatically generate the associated placeholder items. These items will bear placeholder keys prefixed with "sxa," resulting in names like "sxa-<<signature name>>."

Cause

The value in the Layout service configuration within the site settings (sxa-jss) does not align with the layoutServiceConfiguration value in Sitecore.JavaScriptServices.Apps.config (jss).

To verify both the values please follow below steps:

  • Navigate to /sitecore/content/[Tenant Name]/[Site Name]/Settings and check the value of the Layout service configuration.


  • Navigate to /App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config, locate the layoutServiceConfiguration, and confirm the value it currently holds.


Solution

  • Navigate to src\lib\layout-service-factory.ts and ensure that configurationName is set to 'sxa-jss'

  • Navigate to src\components\PartialDesignDynamicPlaceholder.tsx and confirm that the placeholder name is set as shown in the image below.

  • Navigate to [JssNextJsAppName]\sitecore\config\[JssNextJsAppName].config, search for layoutServiceConfiguration, and modify its value from "default" to "sxa-jss," as illustrated in the image below.

  • Open Windows PowerShell navigate to your Project cd
  • Run jss deploy config
  • Reset IIS
  • Run: $env:NODE_TLS_REJECT_UNAUTHORIZED=0
  • Run: jss start:connected
  • Access http://localhost:3000
Now, re-add the component to the partial design and verify that it is functioning as expected.




Hope it is helpful, Thanks for Reading!!


Comments

Post a Comment

Popular posts from this blog

Sitecore Interview Questions 2023

1. What Is a CMS? A content management system (CMS) is software that helps users create, manage, and modify content on a website without the need for technical knowledge.  2. What is Sitecore ? Sitecore is a versatile and powerful digital experience platform used by businesses and organizations around the world to create, manage, and personalize their online presence. At its core, Sitecore offers a Content Management System (CMS) that allows users to easily create, edit, and organize digital content for websites, mobile apps, and other online platforms without requiring extensive technical knowledge. However, Sitecore goes beyond traditional CMS capabilities. It's often referred to as a Customer  Experience Platform (CXP) due to its ability to not only manage content but also provide tools for personalization, analytics, and marketing automation. This means that with Sitecore, businesses can tailor the online experiences they offer to individual users, gather insights into use...
Post a Comment
Read more

Troubleshooting 'System.Web.Mvc' Error During Sitecore Visual studio solution Publishing

  In my most recent blog, I extensively covered the steps involved in configuring a Visual Studio Solution for Sitecore development . Following the publishing process, I came across an error message that read " could not load file or assembly 'system.web.mvc, version=5.2.4.0 ," as visibly shown above. The root of the problem was traced back to a discrepancy between my Visual Studio solution, which was utilizing version 5.2.7.0 of  'system.web.mvc,' and the Sitecore Instance, which was employing version 5.2.4.0. To successfully address this issue,  I adopted a straightforward solution:  Copied the ' system.web.mvc.dll ' and ' system.web.mvc xml'  from my backed-up " C:\inetpub\wwwroot\sc103sc.dev.local - Copy\bin" folder.  Pasted to Visual Studio solution " C:\Users\ilma\source\repos\MySitecoreDemo\MySitecoreDemo\bin " and updated the solution Reference for the same. Also pasted to current Sitecore Instance ' bin folder  C:\i...
Post a Comment
Read more

Step by step guide to Establish Headless SXA Tenant, Site and Next.js app with Sitecore XP 10.3

  Step 1: Prerequisites Installed Sitecore version 10.3  Check out Sitecore XP 10.3 Installation guide Configured an HTTP binding in IIS for your site (e.g., http://demo.dev.local - Next.js requires specific setup to connect to an HTTPS server) Installed Sitecore Powershell Installed Sitecore Headless Services  Checkout Headless Services Installation guide Installed SXA 10.3 Successfully populated Solr schema and built necessary indexes Ensured that you are running the latest version of Node Step 2: Create a Headless Tenant Go to the Sitecore Launchpad and click on ' Content Editor' button. To create a Headless Tenant, right-click on the ' sitecore\content ' and then choose ' Insert ' > ' Headless Tenant '. Input the Tenant Name (for eg, 'HeadlessSXATenant'), choose all modules , and then click ' OK '. To create a Headless Site, right-click on ' sitecore\content\HeadlessSXATenant ' and then select ' Insert' > '...
Post a Comment
Read more