Next Image component within MDX throws error

[SnailBones]

Link to the code that reproduces this issue

https://github.com/SnailBones/next-mdx-bug-demo

To Reproduce

1. Set up an app with create-next app and install dependencies for mdx.

npm install @next/mdx @mdx-js/loader @mdx-js/react
npm run dev

2. Set up mdx by adding mdx-components.js editing next-config.js according to next docs
3. Add a mdx page with an image, eg:

import Image from "next/image";

# Title

This is a markdown page

<Image src="/next.svg" alt="Next.js Logo" width={180} height={37} />

Current vs. Expected behavior

Expect the page to render and display image without error. Instead, I see the following error:

In terminal:

⨯ Error: Cannot access Image.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
at _createMdxContent (./app/page.mdx:37:74)
at MDXContent (./app/page.mdx:68:16)
at stringify ()
⨯ Error: Cannot access Image.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
at _createMdxContent (./app/page.mdx:37:74)
at MDXContent (./app/page.mdx:68:16)
at stringify ()
digest: "2940815645"

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #37~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Oct  9 15:34:04 UTC 2
Binaries:
  Node: 20.5.1
  npm: 10.0.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.15
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image), MDX (@next/mdx)

Additional context

Possibly the same as hashicorp/next-mdx-remote#405, but is occurring without next-mdx-remote

[DavidBuck]

I have run into the same problem. For me, the error only occurs when running in development mode ($ npx next dev ) but not in production mode ( $npx next build && npx next start). I have found the issue from version 13.5.1 onward. The 13.4 release versions that I have checked (13.4.4 - 13.4.19) do not have this issue.

The error occurs when the image is imported locally and also when a remote image (src property) is used.

[octavioamu]

If you still ran into this issue notice if you have the image inside a map loop passing the key will solve the error on dev mode.
example:

{project.images?.map((image) => (
  <Image
    key={image} // if key is missing you get the error, be aware to use a unique key
    src={image}
    width={300}
    height={250}
    alt={project.title}
  />
))}

[huozhi]

Fixed in 14.2.3

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