You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Switch to "next": "13.5.6" in package.json
Go to '/articles'
Click on any article.
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
The text was updated successfully, but these errors were encountered:
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:
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.
What component (if applicable)
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:
"next": "13.5.6"
inpackage.json
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
The text was updated successfully, but these errors were encountered: