Description

In the Experience Editor, adding a rendering to the placeholder other than the first one might fail with an unhandled exception. In this case, the affected placeholder has only the phkey attribute and no key attribute. There are two possible scenarios for the issue:

• If there are multiple placeholders defined at the same level.
• When using nested placeholders.

The issue affects React solutions based on Sitecore JavaScript Rendering SDK (JSS) 19.0.0 and 20.0.0.

The following message can be found in the logs:

Exception: System.InvalidOperationException
Message: placeholderKey
Source: Sitecore.ExperienceEditor
   at Sitecore.Pipelines.ExecutePageEditorAction.InsertRendering.Process(PipelineArgs args)
   at (Object , Object )
   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain, Boolean failIfNotExists)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain)
   at Sitecore.Pipelines.ExecutePageEditorAction.ExecutePageEditorActionPipeline.Run(ExecutePageEditorActionArgs args)
   at Sitecore.Shell.Applications.WebEdit.Palette.OnPreInit(EventArgs e)
   at System.Web.UI.Page.PerformPreInit()
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Also, the pop-up message "An error occurred" can appear in the UI when adding a rendering to the placeholder in the Experience Editor.

Solution

To resolve the issue, consider one of the following options:

• Upgrade to Sitecore JSS 20.1.0 or later.
• To prevent the issue:
  1. In the \sitecore\shell\Applications\Page Modes\ChromeTypes\PlaceholderChromeType.js file, replace the lines:

     placeholderKey: function () {
         return this.chrome.openingMarker().attr("key");
     },

     with the following lines:

     placeholderKey: function () {
         return this.chrome.openingMarker().attr("key") || this.chrome.openingMarker().attr("phkey");
     },

  2. Clear the browser cache.