next.js: Upgrading to 13.3.0 cause SyntaxError: Unexpected token u in JSON at position 0

It can be fixed by simply turning your normal function () {} components into arrow function components whereever you’ve used “use client” you must use arrow function, it’s still a bug but it can be fixed by using arrow functions. I’ve fixed it myself and several others from a different issue fixed their projects this way. Until the bug is fixed this should work.

I confirm the words of my predecessor - after installing the nextjs package and before the first run, install: npm install --save next@13.3.1-canary.4 react react-dom

Arrow function fix did not work for me. I had to rollback to 13.2.4.

I can confirm that the issue occurs when “use client” is used and I am also using a win 10 machine with default configurations.

this issue was resolved in v13.3.1-canary.4

changing them to arrow components not a fix for me.

After upgrading to 13.3.0 : same error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)

sur OS Windows 11 (22H2)

Downgrade the Next.js version to 13.2.4 works for me.

Only happens when I use use client for pages.

Rolled back next to v13.2.4 and seems to work now. Hopefully, they will fix it soon for the latest release.

Same here on win11, seem to be every folders/files starting with “u”. I got a folder "ui”, files in trigger error if I change to “fix-ui” error is from a file starting with “use client”.

Error from folder : “Module parse failed: Bad character escape sequence”

I confirm that it is fixed for me at v13.3.1-canary.4

Arrow function fix did not work for me. I had to rollback to 13.2.4. I can confirm that the issue occurs when “use client” is used and I am also using a win 10 machine with default configurations.

this issue was resolved in v13.3.1-canary.4

I’ve fixed it this way.

"use client";
import { useEffect, useState } from "react";

const TestComponent = () => {    //---------------> make an arrow function

const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

 return (
    <div className="App">
      <h1>Counter: {counter}</h1>
    </div>
  );
}
export default TestComponent    //---------------> export from here

Resolved by enabling turbopack. seems a webpack issue. Windows 11, node 16.19.0.

I have the same issue, but working great on 13.2.4. Big Project Can not really share either. I am back at 13.2.4 everything working fine.

I have the same problem after upgrading to 13.3.0. “Only Checked with Windows 11”. Tried to downgrade Next.js version to 13.2.4, removing node_modules and package-lock.json and re-installing modules doesn’t work.

Everything was working properly with 13.2.4, I don’t know what happened after I upgraded to 13.3.0. Downgrading to 13.2.4 not working and still got “SyntaxError: Unexpected token u in JSON at position 0” error.

Downgrade the Next.js version to 13.2.0 works for me.

This error only appears on a Windows machine for me only on NextJS > (13.2.4). Tried Node 18.15, and the latest current 19.8.1. Also tried installing dependancies with NPM (latest) and PNPM (latest). My project runs fine on my mac machine, without

error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ()

This only happens in the 13.3 update. It is related to an issue in parsing 'use client. A simple work around is using the --turbo flag when starting

I do not have this issue (Linux, Next v13.3) however my friend who has the exact same repo as me (Windows 11, Next v13.3.0) does have this issue.

I’ve seen others in this thread mention Windows; perhaps it’s a Windows + v13.3.0 problem?

I was running into this problem when I updated to 13.3 in a project I was working on in Windows 10 on my laptop, and after reading through this issue thread I booted my desktop running Linux (Ubuntu 22.04), run a fresh create-next-app package with 13.3 and unfortunately I’m still having this issue… so no, its a problem on Linux as well. At least it is for me.

Same problem here. It worked fine until v13.2.5-canary.19. Starting from v13.2.5-canary.20 I get this problem on my Windows machine.

I have the same issue when I try to wrap my app with the SupabaseProvider from this example: https://supabase.com/docs/guides/auth/auth-helpers/nextjs-server-components

Don’t know if my problem is related to Supabase or NextJS but I guess it could be useful to share this here. Tested both with 13.3 and 13.2.4 and still got the same problem.

It can be fixed by simply turning your normal function () {} components into arrow function components whereever you’ve used “use client” you must use arrow function, it’s still a bug but it can be fixed by using arrow functions. I’ve fixed it myself and several others from a different issue fixed their projects this way. Until the bug is fixed this should work.

Turning it into an arrow function and exporting that as default worked for me. Thank you.

After i use “use client” i got type n parse errors… Mine NextJS V13.3.0, arrow function worked!

Arrow function fix did not work for me. I had to rollback to 13.2.4.

I can confirm that the issue occurs when “use client” is used and I am also using a win 10 machine with default configurations.

Changing my client components to use arrow function seems to have worked around this. I haven’t been able to migrate to TurboPack yet as it seems to break the optional catch-all route at the root of my app, but it seems (at least for me) using arrow functions for client components is the key.

I’m seeing the same issue with my toy project - https://github.com/TheMagoo73/pokematic. main branch using 13.2.4 is working just fine, but locally I get this issue after upgrading to 13.3.0 in https://github.com/TheMagoo73/pokematic/tree/next-version. This is on my Win10 dev box.

Deploying the 13.3.0 branch out to Vercel as a preview (ie. the version that fails locally) works just fine.

@XEngine I believe the u is from undefined being passed into JSON.parse here:

// node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js

function parseModel(response, json) {
  return JSON.parse(json, response._fromJSON);
}

This is what causes the syntax error since undefined isn’t valid JSON.

yes I also found this block, there is one function that called this function while its argument called “model” or someting was null. I am just not familier with next’s source which is all rust or something otherwise I would try to create a PR 😄

@XEngine I believe the u is from undefined being passed into JSON.parse here:

// node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js

function parseModel(response, json) {
  return JSON.parse(json, response._fromJSON);
}

This is what causes the syntax error since undefined isn’t valid JSON.