Upgrading to 13.3.0 cause SyntaxError: Unexpected token u in JSON at position 0 #48070
Comments
|
I have the same problem even without using "use client". |
|
Same here on win11, seem to be every folders/files starting with “u”. Error from folder : “Module parse failed: Bad character escape sequence” |
|
Similar issue: #47704 |
|
After upgrading to 13.3.0 : same error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () sur OS Windows 11 (22H2) Downgrade the Next.js version to 13.2.4 works for me. |
|
Same problem here on all pages (13.3.1-canary.0) |
|
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
|
|
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. |
|
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. |
|
+1 |
|
Only happens when I use Rolled back next to |
|
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. |
|
already discussed here, also there was a revert from @feedthejim. Seems like they could not reproduce it at review. |
|
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? |
|
@XEngine I believe the // 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 |
|
The issue seems to only happen on Windows. A temporary workaround would be to use WSL. That seems to work for me. |
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 :D |
|
Same issue. 13.3.0 does not support 'use client' |
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. |
|
I'm seeing the same issue with my toy project - https://github.com/TheMagoo73/pokematic. Deploying the 13.3.0 branch out to Vercel as a preview (ie. the version that fails locally) works just fine. |
|
Resolved by enabling turbopack. |
|
Same issue |
|
We're having this same error for last 2 days on windows only, working fine on linux and mac, as everyone else mentioned JSON is recieving undefined in here - |
|
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. |
|
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. |
|
changing them to arrow components not a fix for me. |
|
it didn't help me as well
|
|
this appears to be a greak workaround for now. Closing this since this solution is a PR now and it will probably on the next canary release |
Worked for me, thanks. |
|
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 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 |
|
Fixed with latest canary version |
yep, turbopack works fine |
|
After i use "use client" i got type n parse errors... |
Turning it into an arrow function and exporting that as default worked for me. Thank you. |
fyi edit: |
|
I have the same issue when I try to wrap my app with the SupabaseProvider from this example: 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 will stop working if you have a named export along side default export in your file. also it appears that the issue occurs with named exports Working 'use client';
import { signIn } from 'next-auth/react';
const LoginButton = () => {
return (
<button
onClick={() => {
signIn('github');
}}>
Sign In
</button>
);
};Not Working 'use client';
import { signIn, signOut } from 'next-auth/react';
const LoginButton = () => {
return (
<button
onClick={() => {
signIn('github');
}}>
Sign In
</button>
);
};
const LogoutButton = () => {
return (
<button
onClick={() => {
signOut();
}}>
Sign Out
</button>
);
};
export default LoginButton;
export { LogoutButton }; |
Thanks. It worked. |
|
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 |
|
I confirm that it is fixed for me at v13.3.1-canary.4
|
Next.js 13.3.0 has a bug with the compilation stage that raises an error about JSON parsing. See vercel/next.js#48070
|
This only happens in the 13.3 update. It is related to an issue in parsing |
|
I'm using Windows 11 and nextJS 13.3.0 |
|
Spend two days debugging these issues 😭 |
|
Found out it didnt worked for me, because I use a wrapper.
|
|
Doesn't worked:
Worked in same file: |
|
I updated to version "13.3.1-canary.4" and now it's fixed (no need to do the arrow function workaround, which didn't always work) |
|
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. |
and others
Verify canary release
Provide environment information
Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Binaries: Node: 18.12.1 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 13.3.0 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
can't provide, big project, anyways it only occurs on some environments maybe, couldn't reproduce on stackblitz
To Reproduce
:>
Describe the Bug
When I put "use client" at the top of a file next begins to cry about " SyntaxError: Unexpected token u in JSON at position 0".
13.2.4 didn't have this issue.
Expected Behavior
nextjs should not cri about "u" in "use client".
Which browser are you using? (if relevant)
Chrome
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: