XM Cloud component with dynamic placeholder

Question

I wanted to try and create a custom container component such that it can be placed many times on the page and I can add components to it. I was having a problem at the time of seeing it in Experience Editor. Currently using the https://github.com/sitecorelabs/xmcloud-foundation-head template.

I follow the approach suggested here in order to create a custom container component in order for it to have variants. Why aren't SXA rendering variants available for the default "Page Structure" renderings?. What I did was clone the /sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Page Content/PageContent component using the script.

The component has in the Experience Accelerator section, in the Other properties field, the value of IsRenderingsWithDynamicPlaceholders set to true. In the Layout Service section, in the Layout Service Placeholder, I have selected the newly created placeholder settings item I mention below.

I created a placeholder settings using /sitecore/templates/Foundation/JSS Experience Accelerator/Placeholder Settings/Placeholder. The placeholder key is custom-container-{*}.

I added the Variant and Default variant definition item in /sitecore/content/mySite/Presentation/Headless Variants/CustomContainer. Also made the rendering available in the Experience Editor.

Finally I implemented the component view. I used as base the https://github.com/sitecorelabs/xmcloud-foundation-head/blob/main/src/sxastarter/src/components/Container.tsx.

export const Default = (props: ComponentProps): JSX.Element => {
   const phKey = `custom-container-${props.params.DynamicPlaceholderId}`;
   return(
       <div className="custom-wrapper">
         <Placeholder name={phKey} rendering={props.rendering} />
      </div>
   );
}

I try to add one to Experience Editor and it successfully renders. However if I close it and then open it again, I get the error A rendering error occurred: Cannot read properties of undefined (reading 'attributes').. Inspecting the console I also found this warning Placeholder 'custom-container-1' was not found in the current rendering data.

I am currently struggling to solve this issue and am not sure of the recommended practice for this.

NOTE. If applying the suggested fix of updating the JSS in package.json, and get errors like File '/src/sxastarter/node_modules/@types/react/index.d.ts' is not a module, node_modules/@sitecore-jss/sitecore-jss-nextjs/types/index.d.ts' is not a module and Cannot find namespace 'JSX'. I got it fixed by closing the code editor and restarting the machine (just in case).

Answer 1

This is a known bug in JSS 21 and has been fixed in JSS 21.0.5.

The bug was that all dynamic placeholder keys must be called container-{*} - this was hard coded into the PlaceholderCommon.tsx file in JSS that resolves the dynamic placeholder key with the layout service JSON coming from the GraphQL call. This is why the out of the box components like the Container work ok.

Here is a link to the PR that fixed the issue: https://github.com/Sitecore/jss/pull/1278

To make sure that you don't get this problem, update your package.json file to use JSS 21.0.5 for the following packages:

"@sitecore-jss/sitecore-jss-nextjs": "^21.0.5",
"@sitecore-jss/sitecore-jss-cli": "^21.0.5",

Then re-install your npm packages and you should be able to create your custom placeholder keys.