2

After a while of developing (with a colleague) I get this JS error on every page: "SyntaxError: JSON.parse: unexpected character at line 5 column 50 of the JSON data" in file main.js.

This is nice to know but I have no idea what JSON data is causing the problem. main.js is a core file that was not changed. The firefox console does not tell me what data is the issue and where it comes from.

So my question is: how do I debug such errors?

  • have checked at chrome and use chrome Debugger? – Amit Bera Jun 12 '18 at 13:56
  • I just took a look at it but I am not a JS expert and have no clue how to use it. The console just reports the error: Uncaught SyntaxError: Unexpected token , in JSON at position 314 at JSON.parse (<anonymous>) ... Whatever '<anonymous>' means. – omsta Jun 12 '18 at 14:22
2

The only JSON.parse command in main.js is in the getData function; specifically, at Line 52:

45 function getData(el) { 46 var data = el.getAttribute(dataAttr); ... 50 return { 51 el: el, 52 data: JSON.parse(data) 53 };

The getData function parses "elements 'data-mage-init' attribute as a valid JSON data." This is the attribute Magento uses to inject a JS component into a phtml file. This leads me to believe that you or your colleague have tried to use this attribute to inject a JavaScript script into a template file, but that the attribute's JSON syntax is malformed, however slightly.

If you haven't injected scripts in too many places, then this alone may be enough to help you pinpoint the problem. If not, you may temporarily insert a console.log command after Line 46 of main.js, like so:

46 var data = el.getAttribute(dataAttr); 47 console.log(data);

This may dump enough data in your Firefox console to help you identify where your script injection has gone awry. Just make sure to restore main.js to its original glory after you're done debugging.

  • Thank you. I just thought of the console.log() myself and could identify the source. Still, with magento depending so heavily on sensitive JSON it is pretty darn hard to debug. Not developer friendly. – omsta Jun 12 '18 at 14:29
  • You're welcome. Sometimes just articulating the problem helps you come up with the answer; I believe they call that "rubber duck debugging." Best of luck to you on your Magento 2 learning curve. We're all on it. – Nathan Casebolt Jun 12 '18 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.