Uncaught Syntaxerror: Unexpected Identifier Error With Experience Editor and How to Fix It

Usually when you see a syntax error in console your first intuition is to check latest front-end code changes, but this can actually template authoring! Yeah, it's something Sitecore can fix quite easily, but for now here's a tip on how to identify and resolve this situation.

So, you're in Experience Editor and nothing's working, like adding a component, etc. My first intuition is to look at our site JavaScript, but that's not the issue. In console, you'd see errors like this.

Uncaught SyntaxError: Unexpected identifier
    at Function.evalJSON (16826572347781547230.JS:120)
    at proto.constructor.setData (16826572347781547230.JS:3844)
    at proto.constructor.constructor (16826572347781547230.JS:3461)
    at new proto.constructor (16826572347781547230.JS:271)
    at Object.<anonymous> (16826572347781547230.JS:2328)
    at HTMLElement.g (16826572347781547230.JS:23)
    at 16826572347781547230.JS:23
    at Function.map (16826572347781547230.JS:23)
    at init.map (16826572347781547230.JS:23)
    at Object.chromes (16826572347781547230.JS:2320)

Click on the link so you can see more information from the debugger:

 


This will reveal the issue, which is a simple syntax bug:

In plain text to make it easier:

..."expandedDisplayName":"Use the "Alternate Text" field to set the aria-label"})

What we're seeing here is Sitecore is not checking and sanitizing strings for help text in Experience Editor. Your help fields will need to avoid quotations when providing instruction to the Authors. You can escape the quotations, but I prefer to just rewrite the message so they're not needed.