useMemo problem in Next js when using contentlayer

[RajinCoding2007]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
Binaries:
      Node: 18.13.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
Relevant packages:
      next: 13.4.0
      eslint-config-next: 13.4.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/RajinCoding2007/Next-ContentLayer-Bug

To Reproduce

I followed contentlayer documentation and used useMDXComponent(post.body.code) to render markdown file and it causes error.

Describe the Bug

I was following contentlayer documentation, I got this error:

- error node_modules\next\dist\compiled\react\cjs\react.shared-subset.development.js (1760:20) @ useMemo
- error TypeError: Cannot read properties of null (reading 'useMemo')
    at Page (./app/posts/[slug]/page.jsx:27:96)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
null
- error node_modules\next\dist\compiled\react\cjs\react.shared-subset.development.js (1760:20) @ useMemo
- error TypeError: Cannot read properties of null (reading 'useMemo')
    at Page (./app/posts/[slug]/page.jsx:27:96)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
digest: "2047166120"
null

Expected Behavior

I expected that MDX page will be rendered successfully. I also made an issue in contentlayer repo:

contentlayerdev/contentlayer#449

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

[Toshimichi0915]

(Deleted as it was misleading)

[wadehammes]

For me, a similar error happens only when deployed to Vercel, for useEffect:

TanStack/query#5371

[wadehammes]

I think this is related to #49261

[RajinCoding2007]

Wrong

export async default function Page({ params }) {

Correct:

export default function Page({ params }) {

I checked the code works fine without async keyword. Please check Page function yourself. Thanks.

Yes, it works, but what if I really need await inside the Page? I don't need await right now, but I may need this in future.

[Toshimichi0915]

useMemo is pointless in server components because it does not re-render at all anyway.

useMDXComponent is defined as follows. So you can simply call getMDXComponent instead of useMDXComponent

export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
  return React.useMemo(() => getMDXComponent(code, globals), [code, globals])
}

import { allPosts } from 'contentlayer/generated'
import { getMDXComponent } from 'next-contentlayer/hooks'
import { notFound } from 'next/navigation'

export function generateStaticParams() {
  return allPosts.map((post) => ({
    slug: post._raw.flattenedPath,
  }))
}

export default async function Page({ params }) {
  // Find the post for the current page.
  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)

  // 404 if the post does not exist.
  if (!post) notFound()

  // Parse the MDX file via the getMDXComponent.
  const MDXContent = getMDXComponent(post.body.code)

  return (
    <div>
      {/* Some code ... */}
      <MDXContent />
    </div>
  )
}

[RajinCoding2007]

useMemo is pointless in server components because it does not re-render at all anyway.

useMDXComponent is defined as follows. So you can simply call getMDXComponent instead of useMDXComponent

export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
  return React.useMemo(() => getMDXComponent(code, globals), [code, globals])
}

import { allPosts } from 'contentlayer/generated'
import { getMDXComponent } from 'next-contentlayer/hooks'
import { notFound } from 'next/navigation'

export function generateStaticParams() {
  return allPosts.map((post) => ({
    slug: post._raw.flattenedPath,
  }))
}

export default async function Page({ params }) {
  // Find the post for the current page.
  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)

  // 404 if the post does not exist.
  if (!post) notFound()

  // Parse the MDX file via the getMDXComponent.
  const MDXContent = getMDXComponent(post.body.code)

  return (
    <div>
      {/* Some code ... */}
      <MDXContent />
    </div>
  )
}

Oh, thanks! It works.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.