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

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

import * a “use client” module
Render an exported component from that module without a key in a server component eg. <Client.Component> in an array without a key
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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 10
Comments: 17 (3 by maintainers)

Commits related to this issue

fix: error rendering refs page Needed a key on the tiles being mapped. See: https://github.com/vercel/next.js/issues/52415#issuecomment-1660567214 — committed to jpmorganchase/mosaic by DavieReid 8 months ago

Most upvoted comments

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.

+22

sreuter on Jul 18, 2023

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.

tom-sherman on Aug 1, 2023

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 👍

timneutkens on Jul 18, 2023

+1, I’m using shadcn/ui.

recallwei on Oct 13, 2023

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>)

JulianKingman on Oct 18, 2023

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.

shivam-sharma7 on Oct 23, 2023

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.

Songkeys on Oct 19, 2023

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.

GoodbyeNJN on Sep 20, 2023