Error: Cannot access .prototype on the server when rendering a dotted client component without a key

[tom-sherman]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.13.0
      npm: 8.13.2
      Yarn: 1.22.19
      pnpm: 8.6.6
    Relevant Packages:
      next: 13.4.10-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/tom-sherman/nextjs-key-prototype-bug

To Reproduce

1. import * a "use client" module
2. Render an exported component from that module without a key in a server component eg. <Client.Component> in an array without a key
3. next dev

Describe the Bug

Receive an error on first load after starting the dev server

 error node_modules/.pnpm/next@13.4.10-canary.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js (51:14) @ Object.get
- error Error: Cannot access .prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
    at Component (./app/component.tsx:11:87)
    at stringify (<anonymous>)

This error goes away after refresh

Expected Behavior

The component should render without errors and I should receive a missing key warning.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1452

[sreuter]

This also happened to me when doing a .map over some images using and then returning the next/image component. It seems like adding the missing key attribute fixed it, but the error was super confusing.

[timneutkens]

Did some digging and found why this happens, it's specifically related to the way setCurrentlyValidatingElement is called here in React reads .prototype in shouldConstruct. Specifically here.

I'll ask @acdlite to have a look, seems like a bug in React 👍

[kunwar-11]

any fix for this issue ? and is it only there for development mode ??

[tom-sherman]

The error goes away if you ensure that you are assigning unique keys to array child elements, as is required by React.

I believe this issue is more about making sure the correct error message is shown to the user.

[kunwar-11]

I have provided unique keys too but still getting this issue

[tom-sherman]

Can you share a minimal reproduction?

[kunwar-11]

yes sure

https://github.com/kunwar-11/ecommerce-nextjs

To Reproduce

fork the repository and install all dependency by npm install

start the application by npm run dev

visit http://localhost:3000/Football after running via npm run dev

you will see the error :-

error node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js (51:14) @ Object.get

• error Error: Cannot access .prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
  at Categories (./src/app/[categories]/page.jsx:40:96)

I have sent .env to your twitter

this is issue is coming for fraction of second an then goes away

[kunwar-11]

i have sent the env to your twitter

[GoodbyeNJN]

Any further updates on this issue? I also encountered this error on v15.0.1 and it returned to normal after rolling back to v13.4.19.

I used "@next/mdx" and defined some components in "mdx-components.tsx" and the error message is pointing to these components.

[recallwei]

+1, I'm using shadcn/ui.

[JulianKingman]

I'm encountering this as well, using shadcn/ui in NextJS 13.5.5. Specifically:

Error: Cannot access TabsTrigger.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
    at Home (./app/V2/page.tsx:20:108)
    at stringify (<anonymous>)

[Poylar]

My error was related to the reactReplaceString library. Adding to the Image key fixed the problem

<h1 className="flex flex-col font-display text-xl md:text-3xl lg:text-6xl"> {splitTitle.map((item, index) => { return ( <span className="flex flex-wrap items-center gap-2 md:gap-4" key={item} > {reactStringReplace(item, '[flag]', () => ( <Image key={1} className="h-6 w-7 object-contain" src="/icons/germanyFlag.svg" alt="" width={60} height={48} /> ))} </span> ); })} </h1>

[songkeys]

still on 13.5.5

Error goes:

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

For me, this happens on every un-keyed and arrayed client components.

import { Button } from "@mantine/core";

export default async function Page() {
	return (
		<>
			<Button /> ✅
			{[<Button />]} ❌
			{[<Button key="123" />]} ✅
		</>
	);
}

I think we should make this error message more clear.

[lamualfa]

still on 13.5.5

Error goes:

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

For me, this happens on every un-keyed and arrayed client components.

import { Button } from "@mantine/core";

export default async function Page() {
	return (
		<>
			<Button /> ✅
			{[<Button />]} ❌
			{[<Button key="123" />]} ✅
		</>
	);
}

I think we should make this error message more clear.

Giving a key to the element inside a loop is works for me. Thanks.

[shivam-sharma7]

This also happened to me when doing a .map over some images using and then returning the next/image component. It seems like adding the missing key attribute fixed it, but the error was super confusing.

@sreuter This is worked for me.

[huozhi]

Tested against the latest canary (14.0.5-canary.45) the issue is resolved for me now

[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.