Seeing an Error "Cannot access .propTypes on the server" after updating to Next.js v13.4.12

[DystopianDisco]

Bug:

On loading the guides or the blog pages getting an 'Unhandled Runtime Error'

Error: Cannot access .propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

This occurs after updating next.js from v13.3.2-canary.13 to Next.js v13.4.12. The rest of the app works - how to resolve?

[tyrozz]

I also had this issue. I guess it is related to contentlayer related pages. You can try to create a client component to render the blog post details and use this component in the blog post detail page. Same logic for other mdx related pages.

[shadcn]

This is a known issue. If you have components like <Foo.Bar /> it does not work with Contentlayer.

[jbryandev]

The culprit is the <Image> tags in a few of the mdx content files. I fixed by marking them as jsx in the markdown files. For example:

```jsx
<Image
  src='/images/blog/blog-post-4.jpg'
  width='718'
  height='404'
  alt='Image'
/>
```

[choubari]

I had the same error yesterday, and found already an issue created in the Contentlayer repo.

It looks that the props passed to Next Image are not read properly by Contentlayer with Nextjs 13.4, either downgrade to 13.3 or change the way you pass Image component on your mdx-components file

import Image, { ImageProps } from "next/image"

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

Originally posted by @jdharms in contentlayerdev/contentlayer#506 (comment)

[jbryandev]

I haven't tested it out, but that seems like the best solution, as it appears to maintain complete functionality of the Next Image component. I hadn't had a chance to test out my prior solution to see if the Image component was functioning as intended, and I think using a pure <img> tag would lose the benefits provided by the Next Image component. Thanks for posting @choubari!

[vagnermaltauro]

i opened a PR with the correction
#212

[soulbliss]

I had the same error yesterday, and found already an issue created in the Contentlayer repo.

It looks that the props passed to Next Image are not read properly by Contentlayer with Nextjs 13.4, either downgrade to 13.3 or change the way you pass Image component on your mdx-components file

import Image, { ImageProps } from "next/image"

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

Originally posted by @jdharms in contentlayerdev/contentlayer#506 (comment)

This solution worked for me