Next 14. Cannot access displayName.valueOf on the server

[Andrew9614]

Link to the code that reproduces this issue

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

To Reproduce

1. Start next dev
2. 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

[JesseKoldewijn]

Hey @balazsorban44 do you know by chance if there's any fix in the making for named client component imports? This seems to be an issue for quite a while already.

[Andrew9614]

Important clarification: in previous versions there was no such error. At least I didn’t notice it in my projects

[JesseKoldewijn]

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.

[Sravan1011]

So is the bug solved is still an issue ?

[JesseKoldewijn]

So is the bug solved is still an issue ?

What do ya mean?

[Sravan1011]

I wanted ask if the error is solved ? I meant unhandaled error

[JesseKoldewijn]

I wanted ask if the error is solved ? I meant unhandaled error

If you use a default export in client components, yes

Edit: would like to add that the info I gave is purely based on how I've experienced the matter at hand personally. I don't know for sure if this is the intended behaviour.

[Sravan1011]

okay thanks for the information

[justkahdri]

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 }

[Tsourdox]

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

[Sravan1011]

"use client"

const Link = () => {
}

const Dropdown = () => {
}

const Wrapper = () => {
}

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

using this you can't have the error it's solved using this

[Vyacheslav1557]

Still facing this problem:

import {Table, TableTbody, TableTd, TableTr} from "@mantine/core";
import {Subject, subjects} from "@src/shared/api/temporary/api";
import {FunctionComponent} from "react";

interface SubjectWithIndex extends Subject {
    index: number
}

const SubjectComp: FunctionComponent<SubjectWithIndex> = (subject) => {
    return (
        // <TableTr key={subject.index}>
        //     <TableTd>
        //         <pre>{subject.time}</pre>
        //     </TableTd>
        //     <TableTd>{subject.name}</TableTd>
        //     <TableTd>{subject.description}</TableTd>
        //     <TableTd>{subject.homework}</TableTd>
        //     <TableTd>{subject.color}</TableTd>
        // </TableTr>
        <>
        </>
    )
}

const ScheduleEdit = () => {
    const rows = subjects.map((subject, index) => (
        <SubjectComp index={index}
                     name={subject.name}
                     description={subject.description}
                     homework={subject.homework}
                     color={subject.color}/>
    ));

    return (
        <Table className="rounded" p={10}>
            <TableTbody>
                {rows}
            </TableTbody>
        </Table>
    );
};

export {ScheduleEdit};

[JesseKoldewijn]

Still facing this problem:

import {Table, TableTbody, TableTd, TableTr} from "@mantine/core";
import {Subject, subjects} from "@src/shared/api/temporary/api";
import {FunctionComponent} from "react";

interface SubjectWithIndex extends Subject {
    index: number
}

const SubjectComp: FunctionComponent<SubjectWithIndex> = (subject) => {
    return (
        // <TableTr key={subject.index}>
        //     <TableTd>
        //         <pre>{subject.time}</pre>
        //     </TableTd>
        //     <TableTd>{subject.name}</TableTd>
        //     <TableTd>{subject.description}</TableTd>
        //     <TableTd>{subject.homework}</TableTd>
        //     <TableTd>{subject.color}</TableTd>
        // </TableTr>
        <>
        </>
    )
}

const ScheduleEdit = () => {
    const rows = subjects.map((subject, index) => (
        <SubjectComp index={index}
                     name={subject.name}
                     description={subject.description}
                     homework={subject.homework}
                     color={subject.color}/>
    ));

    return (
        <Table className="rounded" p={10}>
            <TableTbody>
                {rows}
            </TableTbody>
        </Table>
    );
};

export {ScheduleEdit};

Have you tried any of the suggested solutions?

[Vyacheslav1557]

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

[JesseKoldewijn]

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.

[Vyacheslav1557]

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

[DusanStojanovic-gowago]

This error started happening in my project after updating from 14.0.3 to 14.0.4. (Possibly because my app uses material-ui)

[JeremyKennedy]

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.

[Vyacheslav1557]

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

[sinafath]

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

[nephlin7]

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.

This resolved the issue also on my side. On my case I was using a value as a key that returned undefined from my API.

[JesseKoldewijn]

@Andrew9614 did you manage to fix your code which prompted you initially to open this issue? And if so, could you close this issue.

If you didn't find a fix yet, feel free to check any of the suggested fixes.🤙

[huozhi]

This issue is fixed on React side in facebook/react#27930, fixed on Next.js in #60619

[github-actions]

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.