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

Why this is a good first issue

The issue involves modifying warning behavior for null-prototype objects in React's serialization.

AI Summary

The issue reports incorrect warnings when passing null-prototype objects from Server to Client Components. The fix likely requires changes to React's serialization logic, which Next.js vendors. The main challenge is determining the appropriate handling of null-prototype objects without breaking existing functionality.

Issue Description

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 Labels

Upstreambug