next.js
next.js copied to clipboard
Incorrect warning for objects with null prototype passed from Server Components to Client Components
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: x64
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: 16.19.0
npm: 9.4.1
Yarn: 1.22.19
pnpm: 7.14.2
Relevant packages:
next: 13.2.5-canary.14
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
https://github.com/charltoons/next-rsc-null-prototype-warning
To Reproduce
Pass an object with a null
prototype from a Server Component to a Client Component
Example server component:
const objectWithNullPrototype = Object.create(null);
objectWithNullPrototype.foo = "bar";
return <ClientComponent myObject={objectWithNullPrototype} />
Example client component:
"use client";
export const ClientComponent = (myObjectProp: any) => {
return <pre>{JSON.stringify(myObjectProp)}</pre>;
};
Describe the Bug
Observe in the server logs the following warning:
Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
<... myObject={{foo: "bar"}}>
^^^^^^^^^^^^^^
While this is only a warning and does not inhibit runtime behavior, large objects will print this warning for each object instance. We discovered this issue when trying to pass an extracted cache from an Apollo client (which uses null prototype) to a client component. In this case, it results in hundreds of lines of warning logs for each request.
I'm not sure if this a a Next.js bug or a React bug. The issue can be attributed to this function: https://github.com/vercel/next.js/blob/canary/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js#L1154
Expected Behavior
No warning is emitted since objects with null
prototype are serializable.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
Vercel (the issue appears during local dev)