Article Management System from TailwindUI Template (Spotlight) not working in Next.js 13.5.6

[bgdnandrew]

What component (if applicable)

• Component name: TailwindUI's Spotlight Template
• URL for category: /articles/[any article]

Describe the bug
I was trying to replicate the article system in the spotlight template. I like the fact it uses .mdx pages. I've worked with the Spotlight template before, so I was surprised to see the error:

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

I rolled back to Next 13.4.16 and the error disappeared.

I did a fresh download of Spotlight, and I was able to reproduce it there as well (with Next 13.5.6).

To Reproduce
Steps to reproduce the behavior:

1. Switch to "next": "13.5.6" in package.json
2. Go to '/articles'
3. Click on any article.
4. See error:

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

Screenshots

[RobinMalfait]

Hey!

This is currently a regression in Next.js itself. Unfortunately we can't properly solve this right now, because ArticleLayout.propTypes code doesn't exist in our code base, but is being used/called from MDX itself. But there are some workarounds I'll get to later.

The good thing is that this is a development problem only, running npm build && npm start works as expected, so a re-deploy shouldn't break production websites. But since it's a development problem, it is quite inconvenient to say the least.

For now I would recommend to go back to Next.js version that worked (e.g.: 13.4.16) until the bug is fixed.

However, if you do want to use the latest version of Next.js then we can add a workaround.

After digging into the issue more, it turns out that this is caused when a client component is used inside the mdx file. The ArticleLayout is a client component, marked as 'use client'. We can get around it by introducing an in-between wrapping component:

// src/components/ArticleLayoutRSC.jsx
import { ArticleLayout as ArticleLayoutClient } from './ArticleLayout'

export function ArticleLayout(props) {
  return <ArticleLayoutClient {...props} />
}

Now, you can apply the following diff in the mdx file(s):

- import { ArticleLayout } from '@/components/ArticleLayout'
+ import { ArticleLayout } from '@/components/ArticleLayoutRSC'

Now, we just replaced the client component with a wrapped component such that we are only using server components in the MDX files.

However, you will need to update all client components with a similar pattern. For example, in our demo articles we use the Image component from next/image which has the same issue right now.

Once the Next.js bug is fixed, we will make sure to update the templates accordingly.

Related issue(s):

• Importing client components in MDX fails in dev mode vercel/next.js#56153