Uncaught SyntaxError: Unexpected token u in JSON at position 0

76
votes

Only at the checkout and on individual product pages I am getting the following error in the console log:

VM35594:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at run (layout.min.js:9)
    at app.min.js:1
    at main.min.js:2
    at Object.execCb (require.min.js:112)
    at Module.check (require.min.js:56)
    at Module.<anonymous> (require.min.js:72)
    at require.min.js:11
    at require.min.js:74
    at each (require.min.js:3)

I am using a one page checkout extension, but when I disable that the error still shows. I thought it might had something to do with the reviews on the product page (as I moved the reviews out of the tabs), but undoing that change didn't fix the error on the product pages.

7
javascriptjsonsyntax-errormagento2
My best bet is that you are passing undefined to JSON.parse - MinusFour
I guess that "checkout" is a POST request to a page where you will start the checkout of an order right? Did you inspect the JSON of that HTTP POST Request? I will start from here just to see what you are sending is what you can managed in the checkout page. - shadowsheep
Open developer tools console and see at the network tab the response of your script. You may not return a proper json. - AlexCode
Could you place a debugger in your javascript and post the value of your JSON string before it gets passed to JSON.parse? - Tom O.
Hi Howli, have any of our answers helped you? If so, please accept an answer. Otherwise, I'd be happy to help further with more details. - Seth Holladay

7 Answers

179
votes

Try this in the console:

JSON.parse(undefined)

Here is what you will get:

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at <anonymous>:1:6

In other words, your app is attempting to parse undefined, which is not valid JSON.

There are two common causes for this. The first is that you may be referencing a non-existent property (or even a non-existent variable if not in strict mode).

window.foobar = '{"some":"data"}';
JSON.parse(window.foobarn)  // oops, misspelled!

The second common cause is failure to receive the JSON in the first place, which could be caused by client side scripts that ignore errors and send a request when they shouldn't.

Make sure both your server-side and client-side scripts are running in strict mode and lint them using ESLint. This will give you pretty good confidence that there are no typos.

6
votes

As @Seth Holladay @MinusFour commented, you are parsing an undefined variable.
Try adding an if condition before doing the parse.

if (typeof test1 !== 'undefined') { test2 = JSON.parse(test1); }

Note: This is just a check for undefined case. Any other parsing issues still need to be handled.

5
votes
localStorage.clear()

That'll clear the stored data. Then refresh and things should start to work.

2
votes

For me, that happened because I had an empty component in my page - 

<script type="text/x-magento-init">
   {
   ".page.messages": {
       "Magento_Ui/js/core/app": []        
      }
   }

Deleting this piece of code resolved the issue.

0
votes

This is due to the interfering messages that come on to the page. There are multiple frames on the page which communicate with the page using window message event and object. few of them can be third party services like cookieq for managing cookies, or may be cartwire an e-com integration service.

You need to handle the onmessage event to check from where the messages are coming, and then parse the JSON accordingly.

I faced a similar problem, where one of the integration was passing a JSON object and other was passing a string starting with u

0
votes

I had this issue for 2 days, let me show you how I fixed it.

This was how the code looked when I was getting the error:

request.onload = function() {
    // This is where we begin accessing the Json
    let data = JSON.parse(this.response);
    console.log(data)
}

This is what I changed to get the result I wanted: 

request.onload = function() {
    // This is where we begin accessing the Json
    let data = JSON.parse(this.responseText);
    console.log(data)
}

So all I really did was change this.response to this.responseText.

0
votes

Your app is attempting to parse the undefined JSON web token. Such malfunction may occur due to the wrong usage of the local storage. Try to clear your local storage.

Example for Google Chrome:

  1. F12
  2. Application
  3. Local Storage
  4. Clear All