next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Incorrect warning for objects with null prototype passed from Server Components to Client Components

Open charltoons opened this issue 1 year ago • 21 comments

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)

charltoons avatar Mar 23 '23 16:03 charltoons