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