next.js: SyntaxError: Unexpected token u in JSON at position 0 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: win32
      Arch: x64
      Version: Windows 11 Pro
    Binaries:
      Node: 18.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at parseModel (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:33:15) at resolveModule (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:755:33) at processFullRow (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:831:9) at processBinaryChunk (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:875:5) at progress (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1486:5) app-index.js:23 The above error occurred in the <ServerRoot> component: at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:147:11) at RSCComponent at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:164:11) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. window.console.error @ app-index.js:23 react-dom.development.js:25134 Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at parseModel (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:33:15) at resolveModule (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:755:33) at processFullRow (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:831:9) at processBinaryChunk (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:875:5) at progress (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1486:5)

To Reproduce

npm run dev load site sites stays blank

Describe the Bug

sites stays blank

Expected Behavior

working site

Which browser are you using? (if relevant)

Version 112.0.1722.46 (Offizielles Build) (64-Bit)

How are you deploying your application? (if relevant)

localhost

About this issue

Original URL
State: closed
Created a year ago
Comments: 17 (2 by maintainers)

Commits related to this issue

updates dependencies and next.js due to bug in 13.3.0, see here: https://github.com/vercel/next.js/issues/48447 — committed to boldvideo/nextjs-starter by marcelfahle a year ago

Most upvoted comments

Isn’t that the same error as #48152?

For me (on Next 13.3.0) switching all the components/pages that had 'use client' to arrow functions worked.

const Home = () => {
  return <h1>Home Page</h1>
}

export default Home

Pau-Marin on Apr 16, 2023

The solution proposed by @Pau-Marin worked for me, thanks a lot! Still I do not understand why this error is happening 😦

Here’s the explanation + solution that was implemented on -canary version: https://github.com/vercel/next.js/issues/47704#issuecomment-1501058527

Pau-Marin on Apr 16, 2023

I’m getting the same error… although not with the steps that @avmentzer described.

In my case, the steps to reproduce are:

Run yarn create next-app … I opted in to typescript and the experimental app dir and left everything else default
Switch to the project folder and run yarn dev
Create a Counter.tsx controle in the app folder, as per the docs
Add the Counter component somewhere in the main Page.tsx
Boom… the website no longer works.

I’m using Next JS v13.3.0… I actually tried pulling the state management stuff out of the Counter component. The thing that causes the website to fall over is the 'use client'; directive at the top of the Coutner.tsx file.

More details in this question on Stack Overflow.

jamescrosswell on Apr 16, 2023

Since the export default function syntax is not working, it worked for me by rolling back to 13.2.4

m10rten on Apr 20, 2023