[NEXT-940] Unexpected token u in JSON because of "use client"

[thewbuk]

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

[mattiasw]

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.

[ZiBuDo]

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.

[JesseKoldewijn]

Have y'all tested this on Node LTS as well? Because I haven't seen this issue before and since you're on Node 16 it could be worth a try.

[mattiasw]

Tried it on Node 18 and still the same error.

[thewbuk]

Likewise updated node and that doesn't fix it. Additionally next info seemed to give some incorrect info about my system so fixed that.

[JesseKoldewijn]

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

[frg]

@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.

[Brettkgamble]

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.

[darklight9811]

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.

[Kiborgik]

The same on any canary> 20. Win 11, Node v18.15.0

[Winwardo]

Happening here on use of "use client".
Canary 20+, Windows 10, Node 18.14.2.

Looking through commits between 53bcdea and 18131c7, the following few look possibly related:

• Add initial tree shaking refactorings
• Improve client boundary source type detection

[epndavis]

"use client";

const About = () => {
return

;
};
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

[JesseKoldewijn]

"use client";

const About = () => {
return

;
};
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😅

[Nickman87]

"use client";
const About = () => {
return ;
};
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

Same here, switching my client component to an arrow function instead of a regular function fixed the build error, didn't change anything else:
Windows 11 fresh install + node V18.15.0 (latest LTS)

--- edit ---
Same thing is also happening at runtime. I have some other clientside components in regular functions that do not give an error during build for some reason, but only throw this same error at runtime. Spent some time trying to find the source of the issue but got caught up in the webpack dev server code and could not figure it out further.

It is however strictly coupled to using a regular function inside a "use client" component, switching them to arrow functions fixes the error.

--- second edit ---
After changing all components to arrow functions, my login page seemed to work again, but when redirecting after login I got a whole list of undefined is not valid JSON errors, seems to be related to #47024
I can confirm the issues start appearing as of canary 20: https://github.com/vercel/next.js/releases/tag/v13.2.5-canary.20

[Brettkgamble]

I edited all of my client components and changed to Arrow functions which partially solved the issue. I am using Vercel's Analytics wrapper which has the format:

`
"use client";
import { Analytics } from '@vercel/analytics/react';

export function AnalyticsWrapper() {
return ;
}
`

When I change this to an arrow function everything breaks. The same for the preview Suspense that I am using for my Sanity CMS integration.

`"use client"

// Once rollup supports 'use client' module directives then 'next-sanity'
// will include them and this re export will no longer be necessary

export { PreviewSuspense as default } from 'next-sanity/preview';`

I try to keep up with the Canary releases.....for exactly this reason, when things break I like to stay ahead a little, rather than trying to upgrade higher versions of releases which has been problematic in the past.

[darklight9811]

Error still happening in 13.2.5-canary.32

[SuttonJack]

If anyone is in a position where others on your team have Windows and you only have a mac, I used this app, downloaded Node, and was able to debug our codebase / try the suggestions above.

[darklight9811]

Wish vercel/next team would look into this, because Im unable to test fixes and later improvements because of this error.

[DerianAndre]

I had all my functions as arrow functions and with export default. One page had export const metadata = { ... } and it affected, removing it solve the issue... also I tried export { metadata } didn't work had to remove it completly.

[Systemcluster]

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' .

[motopods]

It's related to two files, changed in 13.2.5-canary.20.

dist\build\analysis\get-page-static-info.js
next-swc.win32-x64-msvc.node

[motopods]

next.js/packages/next/src/build/analysis/get-page-static-info.ts

Line 45 in 18131c7

/\/\* __next_internal_client_entry_do_not_use__ ([^ ]*) (cjs|auto) \*\//

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

Maybe

next.js/packages/next-swc/crates/core/src/react_server_components.rs

Line 298 in 18131c7

text: format!(

[motopods]

This error occurs when the clientEntryType is auto

next.js/packages/next/src/build/analysis/get-page-static-info.ts

Line 65 in 18131c7

const clientEntryType = clientInfoMatch?.[2] as 'cjs' | 'auto'

Maybe some problem with moduleProxy in windows.

[Kiborgik]

Is the team aware about this?

[ghost]

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

[motopods]

It's path backslash and string escape bug at next-flight-loader, in Windows

next.js/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

Line 67 in 9c0e520

const proxy = createProxy("${this.resourcePath}")

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?

[ddcrobert]

Works for me, huge thanks!

[ventsislavnikolov]

@motopods Thank you! It's working like a charm because for me, using the Arrow function cannot fix the problem because external libraries like NextAuth Session Provider are invoked and the problem still exists.

[thewbuk]

Amazing find @motopods! Works great on the newest versions. Having said that, I am not sure how the arrow function trick seems to solve it in some cases (it didn't fully solve it in mine), so worth investigating further and hopefully, an official patch will come soon now

[Keroxen]

converting to arrow function fixed the issue for me in 13.3.0.

[iliaamiri]

It's path backslash and string escape bug at next-flight-loader, in Windows

next.js/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

Line 67 in 9c0e520

const proxy = createProxy("${this.resourcePath}")

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-loade](https://linear.app/vercel/issue/NEXT-flight-loade)r\index.js, this file. then delete .next directory, restart dev. And give me some feedback?

Thank you! This is working for me as well ❣️
Tested on Vercel and everything works fine now 🤗

I didn't need to convert to arrow functions either. I'm on Windows 11 and Node v18.12.1

[SageJustus]

It's path backslash and string escape bug at next-flight-loader, in Windows

next.js/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

Line 67 in 9c0e520

const proxy = createProxy("${this.resourcePath}")

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-loade](https://linear.app/vercel/issue/NEXT-flight-loade)r\index.js, this file. then delete .next directory, restart dev. And give me some feedback?

This is working for me as well.
I'm on Windows 10 and Next.js 13.3.0.

[basstimam]

It's path backslash and string escape bug at next-flight-loader, in Windows

next.js/packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

Line 67 in 9c0e520

const proxy = createProxy("${this.resourcePath}")

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-loade](https://linear.app/vercel/issue/NEXT-flight-loade)r\index.js, this file. then delete .next directory, restart dev. And give me some feedback?

Thanks it worked for me!

[darklight9811]

Thanks @shuding, really grateful for this

[AlexKaridas]

same problem....

[iliaamiri]

@AlexKaridas Does this solution work for you?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.