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.

Inflated

My best bet is that you are passing undefined to JSON.parse – Creolized

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. – Gynaecology

Open developer tools console and see at the network tab the response of your script. You may not return a proper json. – Unpile

Could you place a debugger in your javascript and post the value of your JSON string before it gets passed to JSON.parse? – Iciness

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. – Dagny

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.

Dagny

For me, I had encoded Emoji was invalidating the JSON being decoded. There was a value in a string in my json of ð??¸. I was using the fetch in React Native to make a request, and the JSON parsing would result in this error until I took the Emoji out of the JSON. For more: ttpshttps://mcmap.net/q/175680/-emoji-characters-cannot-be-encoded-to-json – Tammitammie

For browser Chrome is Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at <anonymous>:1:6 – Farrell

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.

Dislodge

True, this would prevent the program from crashing. However, in most cases, it's good for a program to crash when given invalid input. Depends on where the data is coming from, though. Either way, note that lots of things are invalid JSON, not just undefined, so this is hardly a robust check. nczonline.net/blog/2009/03/03/… – Dagny

True. This just covers the Unexpected token u in JSON at position 0 and other issues still need to be handled. Will update my answer. – Dislodge

Answer 3

localStorage.clear()

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

Cognate

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

Ivanna

I just had this issue and Alexander Borisov is spot on. Please allow me to add "Session Storage" to the list of places to clear. In my case, I am using this to store auth tokens and the issue came about during a transition from Flask to FastAPI. – Antung

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.

Wenona

Answer 6

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'
   

Nyctaginaceous

Answer 7

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

Hagerty

Answer 8

you can simply check data has some value or undefined :

if(res){
 let apiResponse = JSON.parse(res);
}

it will work.

Sensation

Answer 9

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.

Fuegian