next.js: [NEXT-940] Unexpected token u in JSON because of "use client"

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win64
      Arch: x64
      Version: Windows 11 Home
    Binaries:
      Node: 18.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.21
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Static HTML Export (next export)

Link to the code that reproduces this issue

https://github.com/thewbuk/nextjs13_error

To Reproduce

npm run build

Describe the Bug

When trying to build project, SyntaxError: Unexpected token u in JSON at position 0 is thrown for every page that uses "use client" even though the latest release of the canary is supposed to fix this issue.

Using App directory

Expected Behavior

Create static export

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-940

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 38
  • Comments: 46 (10 by maintainers)

Commits related to this issue

Most upvoted comments

It’s path backslash and string escape bug at next-flight-loader, in Windows https://github.com/vercel/next.js/blob/9c0e52089628c25c13a5bce6fb57b18f65dbbae1/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts#L67

Possible solutions

- const proxy = createProxy("${this.resourcePath}")
+ const proxy = createProxy(String.raw\`${this.resourcePath}\`)

I am not sure arrow function’s workaround is the same problem as this.

Is there anyone patch node_modules\next\dist\build\webpack\loaders\next-flight-loader\index.js, this file. then delete .next directory, restart dev. And give me some feedback?

+56
motopods on Apr 9, 2023

This is not just related to pages, every component with "use client" causes this error in 13.3.0.

Reproduction:

  • Create an example app with npx create-next-app@latest --experimental-app
  • Create a simple client component:
"use client"
export const ClientComponent = () => {
    return (<div>Hello World</div>)
}
  • Add it to app/layout.tsx:
<body>
    {children}
    <ClientComponent/>
</body>

This results in Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data with 13.3.0 while working fine in 13.2.4.

This is also affecting next dev, not only next build, even without output: 'export' .

+26
Systemcluster on Apr 7, 2023

Confirmed here that Windows is broken.

Arrow Function Fixes It

Broken code:

"use client";

export default function MyComponent() {
  return <h1>Hello World</h1>;
}

The fix is to just convert to arrow function:

"use client";

const MyComponent = () => {
  return <h1>Hello World</h1>;
}
export default MyComponent;

Platform: Windows 11 Next Version: 13.3.0 React Version: 18.2.0

+20
chris-pikul on Apr 8, 2023

Same problem in our project using 13.2.5-canary.21. It works fine on Linux but not on Windows. We’re seeing the problem with next dev too.

+14
mattiasw on Mar 30, 2023

“use client”;

const About = () => { return <div></div>; }; export default About;

For me not using the arrow function broke it.

"use client";

export default function About() {
	return <div></div>;
};

Swapped my client component to an arrow function and it worked. Version: 13.2.5-canary.28 , Windows 11, Node: 16.14.2

+12
epndavis on Apr 3, 2023

@leerob sorry for pinging you here, but its been almost two weeks, one stable launch. And this is still blocking all windows users from continuing using next on app dirs.

+11
darklight9811 on Apr 8, 2023

On 13.2.4 with a page that uses a client component.

When I migrate the page to a route group with a multiple root layouts I also get this error. Tested on canary as well.

On Windows.

+8
ZiBuDo on Mar 30, 2023

This is just too huge of a bug to be left unoticed by the next team. So I believe we must fall under certain conditions to let this error happen.

From every person that commented here, I would like to know your operating system, node version and any other detail considered relevant.

+6
darklight9811 on Apr 3, 2023

found the issue, you’re using a fragment in your client page which throws a server mismatch in both dev and build. I got it to successfully run the build and export by changing your client page to the following:

"use client";

const About = () => {
	return <div></div>;
};
export default About;

Don’t mind the arrowfunction swap instead of a regular function, has to do with my dev setup where I autoswap react components/pages etc to arrow function.

See the repo below: https://github.com/JesseKoldewijn/nextjs13-appDir-staticExport

My next info output:

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.15.0
      npm: 9.6.2
      Yarn: 1.22.19
      pnpm: 8.1.0
    Relevant packages:
      next: 13.2.5-canary.22
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0
+6
JesseKoldewijn on Mar 31, 2023

https://github.com/vercel/next.js/blob/18131c7dab79365c7025e59f6052cd81b61a9215/packages/next/src/build/analysis/get-page-static-info.ts#L45

Remove (cjs|auto), and fallback next-swc.win32-x64-msvc to 13.2.5-canary.19. It works.

Maybe https://github.com/vercel/next.js/blob/18131c7dab79365c7025e59f6052cd81b61a9215/packages/next-swc/crates/core/src/react_server_components.rs#L298

+5
motopods on Apr 9, 2023

Thanks @shuding, really grateful for this

+4
darklight9811 on Apr 10, 2023

Confirmed here that Windows is broken.

Arrow Function Fixes It

Broken code:

"use client";

export default function MyComponent() {
  return <h1>Hello World</h1>;
}

The fix is to just convert to arrow function:

"use client";

const MyComponent = () => {
  return <h1>Hello World</h1>;
}
export default MyComponent;

Platform: Windows 11 Next Version: 13.3.0 React Version: 18.2.0

Confirmed, just tried and it solved it the issue. Cheers!

+4
igorroncevic on Apr 8, 2023

This error occurs when the clientEntryType is auto https://github.com/vercel/next.js/blob/18131c7dab79365c7025e59f6052cd81b61a9215/packages/next/src/build/analysis/get-page-static-info.ts#L65

Maybe some problem with moduleProxy in windows.

+3
motopods on Apr 9, 2023

Same problem here. I’ll just wait for the next stable release, as I do not think that replacing all the regular functions in my project with arrow functions is a viable option. Running Windows 11 Pro here.

+3
wouter-deen on Apr 8, 2023

I can confirm this is still not working.

Windows 11 Next 13.3

I have test on my Mac and there’s no issue, it looks looks like a Windows specific issue.

This will not work:


export default function Home() {
  return (
    <main>
      test
    </main>
  )
}

This will work


const Home = () => {
  return (
    <main>
      test
    </main>
  )
}

export default Home```
+2
reginpv on Apr 8, 2023

I am experiencing the same issue here for Versions 13.2.5-canary.20 through to 13.2.5-canary.25

13.2.5-canary.19 works fine.

+2
Brettkgamble on Apr 1, 2023

@JesseKoldewijn This solution didn’t work for me. Did it work for anyone with this issue?

Windows, node 18.12.1, next 13.2.4

Edit: Just managed to solve my issue. I was exporting JSX through an async function, must have been a copy pasta.

+2
frg on Mar 31, 2023

Tried it on Node 18 and still the same error.

+2
mattiasw on Mar 31, 2023

Confirmation of arrow functions working- Using arrow functions to all of your components where “use client” is being used fixes it. We should be using arrow functions for now until this bug gets fixed. Thanks everyone who recommended to use arrow function that actually does work

I’m using Windows - 10 and node 19.7.0

+1
arshad-repliq on Apr 9, 2023

Is the team aware about this?

+1
Kiborgik on Apr 9, 2023

“use client”;

const About = () => { return <div></div>; }; export default About;

For me not using the arrow function broke it.

"use client";

export default function About() {
	return <div></div>;
};

Swapped my client component to an arrow function and it worked. Version: 13.2.5-canary.28 , Windows 11, Node: 16.14.2

Yeah for me it sort of stopped breaking on build when I used arrow functions and actually having a element in the return other than a empty fragment. It did still break on a dynamic route tho cuz on the static build it only exported images used in one of the static routes and nothing else.

So it only exports the following structure:

/_next/** <- ofcourse
/showcase/
--/slug-1 <- only images no html 
/404.html <- might work fine, didnt test
/index.html <- broken asset hrefs

The disfunctional dynamic route might have to do with my setup because I didn’t dive deep into the ssg usecase of it yet, so I’m not sure if you still have to generate the static paths for it.

The disfunctional image src hrefs on the index page are kinda weird to me because I’m not using anything in the homepage that scream “I’m gonna break!” to me honestly.

Might need to have a deeper look into it bur hey, atleast it partially works ish.

Repo: https://github.com/ShiftCodeEU/shiftcode.eu

^ Incase anybody knows what the deal is with the broken images or something, would appreciate it👌

Ps. Sorry for the whole essay😅

+1
JesseKoldewijn on Apr 3, 2023

Same problem here on 13.2.5-canary.21

+1
BeezBeez on Mar 31, 2023
Read more comments on GitHub
← next.js: [NEXT-889] Unable to Test Server Components in Next.js 13 App Dir
next.js: Next 9.5.1 out of memory after some hot reloads →