Uncaught SyntaxError: Unexpected token u in JSON at position 0

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

localStorage.clear()

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

If you get Uncaught SyntaxError: Unexpected token u in JSON at position 0 then you could do the following quick checks:

jsObj = JSON.parse(data)

1. data - check the data is undefined or not

2. data - check the data is a valid JSON string or not

3. data - check the data is corrupted by unwanted whitespace or not

   data = data.trim(); // remove the unwanted whitespace
   jsObj = JSON.parse(data);
   

4. data - check the received data uses the correct encoding format('utf8', 'utf16le', 'ucs2') or not

   fs.readFile(file, 'utf8', function(err, data) { ... });
   
   fs.readFile(file, 'utf16le', function(err, data) { ... }); // le - little endian
   
   fs.readFile(file, 'ucs2', function(err, data) { ... });   // kind  of 'utf16le'
   

Answer 8

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.