next.js: Next 14. Cannot access displayName.valueOf on the server

Link to the code that reproduces this issue

https://github.com/Andrew9614/next14-bug

To Reproduce

Start next dev
Error

Current vs. Expected behavior

Expected: default missing key prop error in console Current: Unhandled Runtime 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.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

Not sure

Additional context

If within server component using client component and it has children array without key prop it throw Unhandled Runtime 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.” on parent component

Options to work around the problem:

add key prop
delete ‘use client’ in Bug component
add ‘use client’ in page.jsx

_NEXT-2032

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 5
Comments: 24 (9 by maintainers)

Most upvoted comments

I had this error to but my problem was that my key attribute was an object and not a string. 🤷‍♂️

Tsourdox on Nov 17, 2023

I got this after updating next from 13 to 14. I’m using Mantine components in a loop. I resolved it by adding a key to the components generated by the loop.

JeremyKennedy on Dec 15, 2023

I worked around it changing the export in the client component:

"use client"

export const Link = () => {
  // ...
}

export const Dropdown = () => {
  // ...
}

export const Wrapper = () => {
  // ...
}

into this:

"use client"

const Link = () => {
  // ...
}

const Dropdown = () => {
  // ...
}

const Wrapper = () => {
  // ...
}

export { Dropdown, Link, Wrapper }
module.exports = { Link, Wrapper, Dropdown }

justkahdri on Oct 30, 2023

I got this after updating next from 13 to 14. I’m using Mantine components in a loop. I resolved it by adding a key to the components generated by the loop.

hehe, same for me

Vyacheslav1557 on Dec 19, 2023

This issue is fixed on React side in https://github.com/facebook/react/pull/27930, fixed on Next.js in #60619

huozhi on Jan 14, 2024

I got this after updating next from 13 to 14. I’m using Mantine components in a loop. I resolved it by adding a key to the components generated by the loop.

that’s how the problem fixed for me

sinafath on Dec 28, 2023

I do everything as stated in the docs of mantine and idk why I get this error https://mantine.dev/guides/next/#compound-components-in-server-components If the problem is not with me, then I will ask the question on the forum of mantine

It does to me sound more like an issue on mantine’s end in your case. They’ll prob be the best party to help ya with the issue you’re running into.

ok, thx

Vyacheslav1557 on Nov 28, 2023

I do everything as stated in the docs of mantine and idk why I get this error https://mantine.dev/guides/next/#compound-components-in-server-components

If the problem is not with me, then I will ask the question on the forum of mantine

It does to me sound more like an issue on mantine’s end in your case. They’ll prob be the best party to help ya with the issue you’re running into.

JesseKoldewijn on Nov 28, 2023

okay thanks for the information

Sravan1011 on Oct 28, 2023

I did notice unreliable behaviour with named client components previously and also noticed multiple issue related to them back then. If this is intended behaviour it might be a good idea to include a rule to the nextjs eslint config, ts-plugin and/or docs.

JesseKoldewijn on Oct 27, 2023