Sitecore 9.1 Experience editor throwing JS errors

Question

we recently migrated to Sitecore 9.1 from 8.1 and we see a bunch of JS errors on the page only in experience editor mode. I dont see them happening in the normal mode.
I tried replacing the Sitecore vanilla js files - still the same.

there are two majors errors that I see getting repeated all over :

Uncaught TypeError: Cannot read property 'hide' of undefined

and

Uncaught TypeError: Cannot read property 'replace' of undefined

Any idea why this might happen?

Answer 1

For us, the problem was an Html.Glass().Editable(...) inside the href of a link. That did not break the Experience Editor in Sitecore 8.1.

The init method of Sitecore.PageModes.ChromeManager throws an error, the initialization fails and the Experience Editor is unusable. That is the first error:

Uncaught TypeError: Cannot read property 'replace' of undefined

To find that, I used the Google Chromes DevTools (Firefox did not work for me). I added a logpoint on line 8347 ($sc.removeTags(this.fieldValue[0].defaultValue.replace(...)) inside Sitecore.PageModes.ChromeTypes.Fields load method and logged the following:

'fieldValue[0].id:', this.fieldValue[0].id

Now, reload the Experience Editor and look for the last id before the uncaught error.
Search for that id in your HTML using DevTools.

P.S.: You may have multiple sources for that error.

Answer 2

I encountered this error when a rendering's Data Source item had a Rich Text field with an unexpected block of Experience Editor markup saved within it. Removing the <span> corrected the issue.

<h4 class="intro-text__st">
  <span class="scWebEditInput scEnabledChrome" id="fld_088A0897B36B48109A41F9D93AC6F128_0933D4A1A5A64D869F1D25E895A882D6_en-US_5_e2a300701f2b4a5fb416ec392e1ba447_34548_edit" data-gramm_id="755be28e-d171-2160-44fd-4ef64349b224" data-gramm="true" spellcheck="false" data-gramm_editor="true" contenteditable="true">
    Our actual HTML content.
  </span>
</h4>

See L1NU5's answer to help identify which rendering has the problem.

Answer 3

With Sitecore 9.3 I did face this recently. @L1NU5's answer helped me to expedite the investigation but for us, it was because of the <input> field.

In one of the View file (.cshtml) we read a value from datasource using this line of code.

<input class="form-control formControl-input" id="filter_result" type="text" placeholder="@Html.Sitecore().Field("PlaceholderText")" autocomplete="off">

It was working fine with Sitecore 9. However, after Sitecore 9.3 upgrade, it only throws an error in EE mode.

I just made a check to resolve the issue as it is not meant to be used in EE mode. If the page is rendered in normal mode then only show the actual value for EE mode shows the static value.

@if (Sitecore.Context.PageMode.IsNormal)
{
    <input class="form-control formControl-input" id="filter_result" type="text" placeholder="@Html.Sitecore().Field("PlaceholderText")" autocomplete="off">
}
else
{
    <input class="form-control formControl-input" id="filter_result" type="text" placeholder="Placeholder Text Here" autocomplete="off">
}

Hope it helps!