Cannot access displayName.valueOf on the server
samtgarson opened this issue · comments
Verify Next.js canary release
- 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.
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 }} />