Cannot access displayName.valueOf on the server

[samtgarson]

Verify Next.js canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Describe the bug

I use this plugin very heavily in a small production app, thanks for the OSS!

Trying to upgrade to Next 14 and any RSCs with the data-superjson attribute anywhere in their tree completely error out, with the following error:

 ⨯ Error: Cannot access displayName.valueOf on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

I have been able to narrow this down with pretty high confidence to this plugin, although it's very difficult to debug.

Some research indicates that this issue can display in Next.js when arrays of children are rendered on the server without a key prop (e.g.). I have been seeing #70 for a long time throughout my app, although it's been ignorable but this doesn't seem to be a coincidence—I wonder if it's possible that the key attribute is getting lost through this plugin.

(I do still get the Warning: Each child in a list should have a unique "key" prop stacktrace next to the above error)

Expected behavior

The page does not explode and the plugin works as described.

Reproduction link

Not available but I can add users to a private repo if it would help

Version

superjson 1.13.3, next-superjson-plugin 0.5.10, next 14.0.3

Config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    swcPlugins: [['next-superjson-plugin', {}]],
    serverActions: true,
    serverActionsBodySizeLimit: '2mb',
    serverComponentsExternalPackages: ['mjml', 'sharp']
  },
  transpilePackages: ['shared', 'database', 'email', 'core'],
  images: {
    unoptimized: true,
    minimumCacheTTL: 60 * 60 * 24 * 90, // 90 days
    remotePatterns: [
      {
        protocol: 'https',
        hostname: new URL(process.env.S3_DOMAIN).hostname
      }
    ]
  }
}

Additional context

As mentioned, this is very difficult to debug without a real stack trace, the error points at the parent of the data-superjson element, so any advice in debugging this further and I would be happy to investigate myself.

[samtgarson]

Can confirm that this error is only occurring for components being rendered in loops, with key attributes and the data-superjson attribute.

Components using data-superjson but not in a loop, i.e. not needing a key seem to work as before.

I've worked around this wtih a horrible component to effectively move the data-superjson away from the key rendering, which seems to work:

export function Wrap<P>({
  c: Component,
  props
}: {
  c: ComponentType<P>
  props: P
}) {
  return <Component {...props} data-superjson />
}

// usage
<Wrap c={MyClientComponent} props={{ props }} />