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
Found solution here: https://github.com/vercel/next.js/issues/47704#issuecomment-1500914372
Just use arrow functions
Change
to
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.