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

Most upvoted comments

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 now

Having 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:

const getData = async () => AnyORM.find();

export const MyServerSideComponent = async () => {
  const data = await getData();

  return <MyClientSideComponent data={structuredClone(data)} />;
};

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.

      const formData = new FormData();
      formData.append("audioFile", input.audioFile[0] as File);
          await upload(
            formData,
          );

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…