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