next/image shows error when dynamically importing mdx

[scottyob]

Verify canary release

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

Provide environment information

[scott@sob-desktop mdx-image-issue]$ yarn run next info
yarn run v1.22.19
$ /home/scott/Documents/tmp/mdx-image-issue/node_modules/.bin/next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Thu, 11 May 2023 16:40:42 +0000
    Binaries:
      Node: 20.0.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: 7.28.0
    Relevant packages:
      next: 13.4.4
      eslint-config-next: 13.4.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

warn  - Latest canary version not detected, detected: "13.4.4", newest: "13.4.5-canary.2".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
Done in 1.17s.

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

Image optimization (next/image, next/legacy/image), MDX (@next/mdx)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/scottyob/nextjs-mdx-issue

To Reproduce

See:

To reproduce, you can clone bug repo: https://github.com/scottyob/nextjs-mdx-issue Url: http://localhost:3000/post/a

Describe the Bug

When importing an mdx file that uses nextjs/image to dynamically render a component:

export default async function Page(props: Props) {
  // Load up the MDX post
  const { default: Component } = await import(
    `content/${props.params.slug}/page.mdx`
  );
  return <Component />
}

We get the error:

Error: Cannot read properties of null (reading 'useContext')

Terminal:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
- error TypeError: Cannot read properties of null (reading 'useContext')
    at stringify (<anonymous>)
- error TypeError: Cannot read properties of null (reading 'useContext')
    at stringify (<anonymous>)
digest: "3238874299"

Expected Behavior

It renders with picture!

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[maxsteenbergen]

Try using regular html img tags, that worked for me.

[tannerabread]

Noting that I saw this too, and did a lot of digging into workarounds. It seems to be an issue of not working on server components, which your repo would be. Doing some slight modifications and adding 'use client' to the post/[slug]/page.tsx allowed the image to show up but that defeats the purpose and also the capability of the generateStaticParams function

Trying to follow the instructions in this section leads to a different but related error of

- error node_modules/@mdx-js/react/lib/index.js (34:26) @ React
- error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(sc_server)/./node_modules/@mdx-js/react/lib/index.js:38:73)

[maxsteenbergen]

@tannerabread I've bumped into numerous issues when using dynamic imports together with MDX. Using either pnpm or turbo results in different errors, one of them being this one and another here

So far, using "use client" and static imports has been the only reliable method.

[scottyob]

@tannerabread I've bumped into numerous issues when using dynamic imports together with MDX. Using either pnpm or turbo results in different errors, one of them being this one and another here

So far, using "use client" and static imports has been the only reliable method.

I gave it a whirl, looks like "use client" is a no go for me.

Seems if I want to dynamically show mdx content in a page, I'm going to need to go down the route of using something like next-mdx-remote and some webpack config for my images until this gets supported/bugfixed?

[scottyob]

Try using regular html img tags, that worked for me.

This does indeed if using MyImg.src