next.js: Incorrect warning for objects with null prototype passed from Server Components to Client Components
Verify canary release
- 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)
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 6
- Comments: 18 (2 by maintainers)
Commits related to this issue
- fix crash on latest version https://github.com/vercel/next.js/issues/47447 — committed to LoV432/cs2-dashboard by LoV432 3 months ago
is there an easy way to silence that warning? 😅 Edit: sadly will have to settle for
JSON.parse(JSON.stringify(data))
from https://github.com/vercel/next.js/issues/11993#issuecomment-617375501 for nowHaving same issue for records coming from Mysql database
This problem is generated by the fact that you are passing a complex property from a server-side component to a client-side component, most likely at some level of the object there are classes or functions that are not easily serialized, so you need make the conversion manually before passing this property.
Example:
Doc: https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
I started getting this issue using react query, I was trying to use the provider in the server component.
moving it into its own ‘providers.tsx’ and using “use client”; at the top solved this for me
It’s happing for me with files, which I can’t stringify 😬
I can upload everything fine, but get this huge red warning.
Looks like I’m doing everything correctly too.
+1 for this. seem like it can be resolved with
JSON.parse(JSON.stringify(data))
but this is reduntant.Can i deactivate this warning? I got many of it…