NextJs 13.5 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.

[ethernal]

Hi,

This error happens only when using Image component directly

see repo: https://github.com/ethernal/personal-site
commit: 781b03a355eed07fab7f62d2cd0f380b987bc1bb

or just clone it and open the page: http://localhost:3000/blog/css-has-pseudo-class

You will see that the ResponsiveImage component uses Next's Image and works fine but for some reason when Image is used directly this error pops up.

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 stringify (<anonymous>)

Components are passed through an array:

export const COMPONENT_MAP = {
	pre: CodeSnippet,
	ResponsiveImage,
	Image,
	FullWidthSplitSection,
	Spinner,
	AboutMeToggleMessage,
	TooltipMessage,
	CV,
};

and used in MDXRemote:

<MDXRemote
	source={pageFile.content}
	components={components} // this is the component map imported ⬆️  
        options={MDXOptions} // see: https://github.com/hashicorp/next-mdx-remote/issues/341
/>

This has not happened in 13.4.x but it's probably related to changes to Image component. On the other hand using Image in pure TSX pages causes no issues so my understanding is that MDXRemote is expecting/doing something special when it finds propTypes in the component?

If anyone can help debug the issue or point me in how to get the root cause I will be grateful.
Thanks!

[mryechkin]

I'm seeing the same issue with my custom components being passed to compileMDXRsc as well after updating to Next 13.5

Using [email protected]. Works fine with no other changes on Next 13.4

[JeroenReumkens]

I don't know why this issue is happening – it feels like it's more of a check they do internally rather than a fatal error.

After messing around I found out that doing the following "fixed" it for me:

const components = {
 // ...
 Image: (props) => <Image {...props} />
}

A bit hacky perhaps, but at least it's working for now.

By the way, for me the issue wasn't with the image component, but with a custom component I created. Not sure what the real issue was. I first suspected it was the dynamic import I do in that file, but removing it didn't solve the issue. So I'm still unsure.

// edit; Only now noticing that this issue isn't in Next's repo. My feeling is it's more of a Next issue than next-mdx-remote, since I'm not using mdx-remote at all.

[ethernal]

@JeroenReumkens I couldn't do this in MDX remote but what I did (for anyone stumbling upon this) is I wrapped the Image component in my own custom component and passed all the props from it to Next's Image component and that fixed the issue.

[sundaray]

@ethernal

Even after wrapping the Image component with my custom component, I still see the error. I am on next ^13.5.1. What could be wrong?

[damesek]

I donwgraded to "next": "13.4.16" and works again my project.

[damesek]

@ethernal

Even after wrapping the Image component with my custom component, I still see the error. I am on next ^13.5.1. What could be wrong?

I needed downgrade to "next": "13.4.16", that solved.

[ethernal]

@damesek This is strange I've just upgraded to Next 14 and I still have no issues.

[damesek]

@damesek This is strange I've just upgraded to Next 14 and I still have no issues.

Hmm.. interesting.

[gmcamposano]

I used the following in next 14 - using the useMDXComponent from contentlayer. I believe it applies as well to next-mdx-remote:

  Image: (props: React.ComponentProps<typeof Image>) => (
    <Image {...props} alt={props.alt} />
  ),

[SnailBones]

Likely the same as vercel/next.js#58888, which is occurring even without next-mdx-remote.

[spencerxl]

On Next 13.5.2, same error. "Cannot access ChildComponent.propTypes on the server."

Really straightforward setup. Parent component is a RSC. Child is 'use client'. No props, only state and effects in the child.

<Wrapper>
   <ChildComponent/>
</Wrapper>

In my case, the error occurs when the child is imported as a named export. Export the child as default export and the issue disappears.

[hasan-wajahat]

Surprisingly modifying the components in mdx did not do it for me when using next-mdx for Next 13.5 or 14. But wrapping and exporting the Image component from my own file did the trick. Credit to this blog post.

TLDR;

import React from 'react'
import Image, { ImageProps } from 'next/image'

export function MdxImage(props: ImageProps) {
  return <Image {...props} alt={props.alt} />;
}

import { MdxImage as Image } from '@/components/MdxImage'
import yourImage from './yourImage.png'

<Image className="mt-4" src={yourImage} alt="your alt text" />

[PaddaSecurity]

Surprisingly modifying the components in mdx did not do it for me when using next-mdx for Next 13.5 or 14. But wrapping and exporting the Image component from my own file did the trick. Credit to this blog post.

TLDR;

import React from 'react'
import Image, { ImageProps } from 'next/image'

export function MdxImage(props: ImageProps) {
  return <Image {...props} alt={props.alt} />;
}

import { MdxImage as Image } from '@/components/MdxImage'
import yourImage from './yourImage.png'

<Image className="mt-4" src={yourImage} alt="your alt text" />

Thank you for this! This worked for me.

Versions:
"next": "^14.1.0", "next-contentlayer": "^0.3.4", "remark-gfm": "^3.0.1",

[waihaolaoxu]

我这里使用循环渲染图片组件，并且忘记添加key属性的时候会遇到这个问题，补充唯一key后就不报了