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