"This element failed to render"

[Caloz]

Hello, I’m using X 8.0.10 and Cornerstone 5.0.10 on Chrome on Chrome OS.

Sometime in the past week or so some of my pages have become filled with elements replaced with gray boxes that say “This element failed to render” in Cornerstone. The pages look normal to visitors but this is making it very challenging to make edits in Cornerstone.

When I open dev tools, there are 74 errors and 71 warnings.

Here’s one error:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at HTMLDocument.<anonymous> (2988:60)
    at e (jquery.min.js?ver=3.5.1:2)
    at t (jquery.min.js?ver=3.5.1:2)

And here’s one that appears 70 times:
react-dom.min.js?ver=16.13.1:125 TypeError: window.jQuery is not a function
at app.514eb0c.js:42
at Array.forEach ()
at app.514eb0c.js:42
at Bh (react-dom.min.js?ver=16.13.1:126)
at Dj (react-dom.min.js?ver=16.13.1:162)
at unstable_runWithPriority (react.min.js?ver=16.13.1:25)
at Da (react-dom.min.js?ver=16.13.1:60)
at xb (react-dom.min.js?ver=16.13.1:162)
at Te (react-dom.min.js?ver=16.13.1:146)
at react-dom.min.js?ver=16.13.1:61

And another error:
Uncaught TypeError: Cannot read property ‘matches’ of null
at l (cs.514eb0c.js:120)
at p (cs.514eb0c.js:120)
at cs.514eb0c.js:120
at cs.514eb0c.js:6
at cs.514eb0c.js:6
at Array.forEach ()
at cs.514eb0c.js:6
at Array.forEach ()
at t (cs.514eb0c.js:6)
at Array.forEach ()

What do you suggest?

Thank you,
Michael

[tristup]

Hi Michael,

There might be a few different reasons behind the issue you are having. I would suggest you troubleshot a few common issues to find the reason behind it.

1.Plugin Conflict
2.Child Theme Related issue **If you have activated it.
3.CSS/JS Customization
4.Disabling Cache

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

NOTE: It seems that the 3rd party plugin SG Optimizer is the cause behind the issue, I would recommend you to deactivate the plugin temporarily after clearing the cache, and check if the issue resolves.

Thanks

[Caloz]

Thanks, I used Site Health troubleshooting mode to disable all plugins except Cornerstone, and I switched to the default 2020 theme. But, I still have the same problem. I’ve also never used that SG Optimizer plugin you mentioned. So, I’ll send you a secure note.

[nabeel]

Hey Michael,

I checked your page and there were errors in custom Page JS and the code inside the Content Area element. I have removed the page JS as well as the code inside the Content Area element and now page is loading fine, however I see another Content Area element which is breaking the bottom sections.

I’m attaching the codes in the Secure Note that I’ve removed so you can review the code.

Thanks!

[Caloz]

Thank you, @nabeel, but this doesn’t make sense to me. Before you made the change, the page worked fine on the front-end (i.e., no errors in the dev tools console when viewed by regular visitors). That HTML and JS code you removed was having the intended functionality for users. When you removed that code, it did remove the errors on the back-end in Cornerstone, but it broke the functionality for users.

I reviewed the code you took out and it looks fine to me, so it seems to me that the problem is with Cornerstone and not with my code (most of what you removed was provided by Mailchimp).

Also, the code you removed is not new. It worked fine weeks ago and only broke on the back-end with a recent Cornerstone update.

After playing with the code some more, I was able to isolate the specific lines from the Content Area code that are causing the “This element failed to render” issues in Cornerstone:

<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FIRST';ftypes[1]='text';fnames[2]='LAST';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

Again, that code was provided by Mailchimp and has worked fine for weeks or months. It’s only in a recent Cornerstone update that it broke on the back-end (but still has the intended functionality on the user-facing front-end).

What do you recommend?

And, if you do any more testing, please use this cloned page instead: https://www.michaelcaloz.com/x/content/3169

Thanks for your help,
Michael

[ruenel]

Hello Caloz,

This may have been the code that has been provided by Mialchimp:

jQuery(document).ready(function($){
  
  //
  let r = document.referrer;
  console.log("ref: " + r);
  
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const utm_ref = urlParams.get('utm_referrer');
  var utm_ref_true;
  if(utm_ref != null){
    if(utm_ref.includes("google")){
     utm_ref_true = true; 
    }
  }
  console.log("ref2: " + utm_ref);
  
  if(r.includes("google") || utm_ref_true){
    $('#welcome-header').text('Coaching for ENTPs');
    $('.hide-if-landing').hide();
    /*$('#honest-warning').hide();*/
  }
  
  	// change the mailchimp success text
  
    // select the target node
  var target = document.getElementById('mce-success-response');

  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (target.innerHTML === "Thank you for subscribing!") {
        target.innerHTML = "Thank you!";
      }
    });
  });

  // configuration of the observer:
  var config = { attributes: true, childList: true, characterData: true };

  // pass in the target node, as well as the observer options
  observer.observe(target, config);
  
  
});

Any addition to the code may have caused the issue. It worked over the past months and failed after your updates. Be advised that **WordPress 5.6** has updated jQuery which could mean that MailChimp code may need an update. We highly recommend that you contact MailChimp support to check if there is a new updated JS embed code for your site.

Hope this makes sense.

[Caloz]

Thanks, @ruenel! I was able to fix it by recreating the form in Mailchimp.

Hope you have a nice day!

[ruenel]

You’re welcome. That’s great!
We really appreciate for letting us know.