2

Having an odd issue in Experience Editor (Sitecore 10.1.2, containers).

Intermittently, when adding a new component from the ribbon, EE will not respond and print the following to console:

Uncaught TypeError: Cannot read properties of null (reading 'parent')

This is looking for chrome.parent inside getChildChromes in the EE JS.

I can "fix" the issue by adding a safe-navigation operator between chrome and parent in my local instance. However, our deploy environments are containerized and we would have to fully replace the EE JS and customize the container to solve; that smells like the wrong solution.

chrome parent safe navigation

I am struggling to see which components/chromes are causing the error, or even if there is are specific ones. Has anyone else seen this issue before?

4

1 Answer 1

2

Please follow the article - https://www.nehemiahj.com/2022/02/sitecore-experience-editor-cannot-read.html, and give it a try.

It says - Added a breakpoint where the code throws the error in the browser. There were 120+ fields with chrome for editing. An error was thrown in the 66th loop and pinpointed the related component. Added a small code in the experience editor JS file in the browser and enabled a breakpoint to find the problematic field.

for (var i = 0; i < l; i++) {
      var currentElem = $sc(elements[i]);
      var chrome = Sitecore.PageModes.ChromeManager.getChrome(currentElem);

      /* Custom added */
      if (chrome == null) {
          console.log("Chrome is null for element");
      }
      /* Custom added */
      
      if (!deep) {
        /* if dom node's parent chrome is not this chrome, it means there is a chrome in between, so we disregard it a descendant, but not a child. */
        if (chrome.parent(false, false) != this) {
          continue;
        }
      }  

The root cause is really simple. One of components built in the front end (Sitecore Headless) was transitioning after a defined interval (10 seconds) and changed the already generated Sitecore html for experience editor. Sitecore experience editor Javascripts were not able to find the related elements and it threw the error. This error will occur for sliders and other components where there is a transition with changes to the html. example: carousel or sliders.

Ideally, we should load sliders in a stacked manner in the experience editor so that content authors can edit easily without animation but view the transition in preview mode. This is not a new thing but sometimes frontend developers forget to use context.pageEditing flag and load the content in a different way for editing purposes.

1
  • 2
    Thank you for putting the relevant parts of the article into an answer! This turned out to be exactly my issue. The offending components were doing AJAX calls to get assets from ContentHub, and had been coded to populate an accordion with results and rollup details in the header. The result component/accordion changing on AJAX success was causing the issue. I remedied by having the result accordion not render in EE, instead showing a help text for content authors, and have not been able to reproduce the issue.
    – eidolonic
    Aug 30, 2022 at 11:43

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.