skip to Main Content

As I understand the beta docs, I need to use "use client" at top of my client component to be defined as one, and I can use it inside server components, leaves or layouts.

With that so, here’s my code.

ClientComponent.js

"use client";

export default function ClientComponent() {
  return (
    <div>
        <h1>This is a client component!</h1>
    </div>
  )
}

ServerComponent.js

import ClientComponent from "./ClientComponent"

export default function ServerComponent() 
{

    return (
        <div>
            <h1>This is a server component!</h1>
            <ClientComponent/>
        </div>
    )
}

Page.js (Leaf)

import { Inter } from 'next/font/google'

import ServerComponent from './ServerComponent';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <main styles={inter.className}>
      <ServerComponent/>
    </main>
  )
}

But I get this error:

Unhandled Runtime Error

SyntaxError: "undefined" is not valid JSON

Call Stack JSON.parse

React

parseModel

node_modulesnextdistcompiledreact-server-dom-webpackcjsreact-server-dom-webpack-client.browser.development.js
(33:0)

resolveModule

node_modulesnextdistcompiledreact-server-dom-webpackcjsreact-server-dom-webpack-client.browser.development.js
(749:0)

processFullRow

node_modulesnextdistcompiledreact-server-dom-webpackcjsreact-server-dom-webpack-client.browser.development.js
(825:0)

processBinaryChunk

node_modulesnextdistcompiledreact-server-dom-webpackcjsreact-server-dom-webpack-client.browser.development.js
(869:0)

progress

node_modulesnextdistcompiledreact-server-dom-webpackcjsreact-server-dom-webpack-client.browser.development.js
(1476:0)

Even if I put directly the client component inside <main> in the leaf, it appears the same error. I do not understand what’s happening as I’d followed the docs. Can someone help?

EDIT: This only happen when client components are added anywhere to the code.

EDIT 2: Look at this repo I made on GitHub, it contains a project with a nearly identical code that causes the same issue https://github.com/Benevos/nextjs-error

2

Answers


  1. Found solution here: https://github.com/vercel/next.js/issues/47704#issuecomment-1500914372

    Just use arrow functions

    Change

    export default function Home() {
      return (
        <main styles={inter.className}>
          <ServerComponent/>
        </main>
      )
    }
    

    to

    const Home = () => {
      return (
        <main styles={inter.className}>
          <ServerComponent/>
        </main>
      )
    }
    
    export default Home
    
    Login or Signup to reply.
  2. Unfortunately, the application that works in the first versions does not work in this version. It does not update the client pages according to the solution above. It is necessary to restart the server every time.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search