Class instances are being serialized with .toJSON method when passed from server to client

[ellisjasmine]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/optimistic-black-sfny6l?file=%2Fcomponents%2Fclient.tsx%3A9%2C23

To Reproduce

Create a custom class that implements .toJSON method.

class CustomClass {
  bigNum: bigint

  constructor(props) {
    this.bigNum = props.bigNum
  }

  toJSON() {
    return { bigNum: String(this.bigNum) }
  }
}

Create a client component that takes a value and logs it to the console.

"use client"

const Client = ({ value }) => {
    console.log(value)
  
    return <p>Client component</p>
}

export default Client;

Inside a server component, create an instance of CustomClass and pass it to client component:

const ServerComponent = () => {
  const value = new CustomClass({ bigNum: BigInt(100)})

  return <Client value={value} />
}

Current vs. Expected behavior

Current behaviour

The value is serialized using .toJSON method and passed to the client.

Expected behaviour

The value should not be serialized as this can go unnoticed and cause issues. Normally when passing an instance as a prop an exception is thrown and would ideally be the case even if the class implements .toJSON.

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: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:55:06 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6020
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: 7.33.6
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.