next.js: [NEXT-978] `./app/[[...params]]/page.tsx` gives `SyntaxError: "undefined" is not valid JSON at JSON.parse ()`

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.7.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: 7.29.1
    Relevant packages:
      next: 13.2.5-canary.0
      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)

No response

Link to the code that reproduces this issue

trivial example below

To Reproduce

Create a trivial page

// ./app/[[..params]]/page.tsx

export default function Page(params) {
  return <>hello</>
}

Describe the Bug

Doing so returns:

error - SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)

Note that if I remove the double bracket notation, the error goes away.

Expected Behavior

The opposite 😃

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

_NEXT-978

About this issue

Original URL
State: closed
Created a year ago
Reactions: 18
Comments: 38 (5 by maintainers)

Commits related to this issue

Update Next.js to 13.2.4. Can't update to 13.3 due to https://github.com/vercel/next.js/issues/47024 — committed to Lakuna/Lakuna.github.io by Lakuna a year ago

Most upvoted comments

if you’re using "use client" and face this error, use your function like this and then the error disappear:

const Home = () => {
    return (
       <div></div>
    )
}

export default Home

+24

mohammadrz003 on Apr 11, 2023

same issue when specifying “use client”.

+16

Evan1115 on Apr 8, 2023

Ran into this as well in next 13.3.0 - triggered when using “use client” on any page or component. Was non issue in last project, next 13.2.4

No fixes or workarounds yet

+11

beckblakestrom on Apr 8, 2023

same for me, but when I first declare the function and after I export it works

+10

alexdwvar on Apr 8, 2023

This problem happened to me on windows but not on mac, with the same project

edgarrps on Apr 9, 2023

Upgrading to the lastest canary fixed my issue.

ackDeckard on Apr 12, 2023

For some reason, doing function <func name> () { } and export default <func name> it works fine

Does not work, when I do const <func name> = () => {} or put the export along with the function declaration.

This happens on all pages, not just on dynamic ones.

a-ramakrishnan on Apr 8, 2023

Hi all! There seem to be multiple different reports in this thread, and I believe some of them have been fixed already. With the latest canary, I can no longer reproduce these problems on my machine:

// ./app/[[..params]]/page.tsx

export default function Page(params) {
  return <>hello</>
}

"use client";
export function Providers({ children }: any) {
  return <>{children}</>;
}

If you are still getting an issue with latest canary (>= 13.3.1-canary.4), please share a reproduction with your Next.js version and operating system name. This will help me debugging the problem, thanks!

shuding on Apr 11, 2023

Same for me, using back the 13.2.4 solved the problem

damien-schneider on Apr 10, 2023

if you’re using "use client" and face this error, use your function like this and then the error disappear:
const Home = () => {

This solution work for me too, need to apply it to all client comp/page. Only changed the export.

"use client"
import { useEffect } from "react"
function Example(){
   return (
      <div>
         We Testing         
      </div>
   )
}
export default Example

elucasjr on Apr 11, 2023

i was using latest version 13.3 faced the same issue multiple times but after changing the version to 13.2.4 everything is fine now

naveen-polasa on Apr 10, 2023

Upgraded to Next.js 13.3 and immediately encountered this issue. Reverted back to 13.2.4 and everything was fine again. The presence of error.tsx or global-error.tsx made no difference. To me it seemed like the error occured as soon as a client component tried to run. As in it wouldn’t even run a console.log at the very start of the functional component.

oliver-oloughlin on Apr 10, 2023

Ran into this as well in next 13.3.0 - triggered when using “use client” on any page or component. Was non issue in last project, next 13.2.4

No fixes or workarounds yet

I have the same issue

nickali2 on Apr 8, 2023

I’m seeing this error on a freshly scaffolded 13.2.5-canary.30 app with providers wrapper even without fragments last working version for me is v13.2.5-canary.19 after that everything broke

removing “use client” fixes it

providers.ts

"use client";
export function Providers({ children }: any) {
  return <>{children}</>;
}

layout.tsx

import { Providers } from "./components/providers";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

error - SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)

mmpneo on Apr 5, 2023

Hey,

I use next v13.2.4, I’ve got the same problem but on my two dynamic routes for the moment app/[slug] & app/[slug]/[product_slug]. I guess it happens on routes with multiple dynamic args.

Other information, i always get this error in production but rarely in development, and it happens after a manual reload of the current page.

MathysHenry on Mar 29, 2023

the solution of error . Change package.json in dev : "next dev --turbo "

ZakariaRekhla2004 on Apr 17, 2023

I have this problem after upgrading to 13.3.0, reverting back to 13.2.4 fixes it. Will wait for a hotfix.

Niclassg on Apr 10, 2023

SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
having this issue even degrading to back to 13.2.4 which was working is giving me this error.

they are happening in client components.

Did you use “npm install next@13.2.4” ? Simply changing your package.json next version and then just using npm install will not fix issue. Using “npm install next@(version)” did work for me however, at least in development, have not used in production yet.

beckblakestrom on Apr 9, 2023

I had the same issue, was tearing my hair out trying to figure out what was causing it.

package.json dependencies:

    "next": "^13.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",

Like others have suggested, when using 'use client' you have to change the way that functions are exported to fix the problem.

'use client';

export default function SignIn () { ... }

to instead

'use client';

function SignIn() { ... }

export default SignIn;

And for me, the issue was fixed.

ivanhouttaylor on Apr 21, 2023

I faced this issue with next@13.3.0. In my case

https://github.com/vercel/next.js/issues/47024#issuecomment-1502874376

This solved the issue but I started having other errors regarding hydration (content mismatch). Only happened on hard reload on the page. (app/q/[qid]/page.tsx)

I used

pnpm create next-app

to bootstrap the application.

This solved the issue for me 👇

Installing latest canary release manually solved the issue for me

pnpm i next@canary

mabdullahadeel on Apr 16, 2023

Closing it then 👍

shuding on Apr 12, 2023

if you’re using "use client" and face this error, use your function like this and then the error disappear:
const Home = () => {
    return (
       <div></div>
    )
}

export default Home

this solution work for me.

ilhamgepe on Apr 11, 2023

The same trouble, while rolled back to the previous version…

nosovandriy on Apr 10, 2023

SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)

having this issue even degrading to back to 13.2.4 which was working is giving me this error.

they are happening in client components.

braswelljr on Apr 9, 2023