Importing client components in MDX fails in dev mode

[pomber]

Link to the code that reproduces this issue

https://github.com/pomber/nextjs-mdx-use-client-bug

To Reproduce

1. Start the app with next dev (it only happens in development mode)

Current vs. Expected behavior

Fails with this error:

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

Call Stack
Object.get
/workspace/nextjs-mdx-use-client-bug/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (22:23981)
React
_createMdxContent
webpack-internal:///(rsc)/./app/hello.mdx (25:74)
MDXContent
webpack-internal:///(rsc)/./app/hello.mdx (45:16)
ej
/workspace/nextjs-mdx-use-client-bug/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (22:35053)

Verify canary release

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

Provide environment information

$ npx --no-install next info

Operating System:
  Platform: linux
  Arch: x64
  Version: #202309200834 SMP PREEMPT_DYNAMIC Wed Sep 20 09:14:42 UTC 2023
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.7.6
Relevant Packages:
  next: 13.5.4-canary.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, MDX (@next/mdx)

Additional context

I'm having problems using any client component directly from mdx files:

import { Test } from "./test";

# Hello

<Test />

If ./test.js has "use client" this fails in dev mode.

A workaround is to re-export the Test component from a file without "use client".

The same example works with next@13.4.19 and fails with next@13.5.1.

Similar to #52415 but now in v13.5 it happens for every client component.

_NEXT-1666

[balazsorban44]

Seems like a regression in https://github.com/vercel/next.js/compare/v13.4.20-canary.31...v13.4.20-canary.32

I think this is related to https://github.com/vercel/next.js/pull/55362, we will have a look!

[mnlfischer]

I run into that issue using custom components in the useMDXComponents hook.

import * as mdxComponents from '@/components/mdx'
import { type MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents) {
  return {
    ...components,
    ...mdxComponents,
  }
}

If I declare custom components inside the file it works.

[ealexhaywood]

This is happening in v13.5.5 for any client component in MDX for me too. Downgrading to 13.4 for now

[MananTank]

I'm also facing the same issue. Downgrading to 13.4 fixed it

[ealexhaywood]

This may be fixed in the latest canary release of 13.5.7. So far so good!

I'm also using the experimental rust compiler in my next config

const nextConfig = {
  experimental: {
    mdxRs: true
  }
}

Edit: things also seem to work well on the default compiler

[pomber]

Just tried v14.0.1 and looks like it is fixed.

[GrowthWizard]

Sadly still run into the same problem, even after the v14.0.1 next.js Update :-/

Only reverting to "next": "13.4.12", solves the issue.

[azdanov]

I'm using this custom component instead of Image in mdx files. Hacky, but works.

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

export function MdxImage(props: ImageProps) {
  return <Image {...props} />;
}

[t6adev]

I tried some versions with this issue in my case. (With App Router)

13.4.12 ~ 13.4.19: No error 13.5.1 ~ 13.5.6 : Error only dev mode 14.0.0 ~ 14.0.1 : No error 14.0.2 ~ : *Another error...

*) Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[victorteokw]

This bug still exists in 14.1

[hbmuller]

I can still reproduce it on the latest version of next.

Edit: actually, it happens to me, but only when consuming components from other parts of my monorepo 🤔

I'll try to isolate the issue later today

[bilal-baig-dev]

This may be fixed in the latest canary release of 13.5.7. So far so good!

I'm also using the experimental rust compiler in my next config

const nextConfig = {
  experimental: {
    mdxRs: true
  }
}

Edit: things also seem to work well on the default compiler

Hey @ealexhaywood, I was using next js v14.1.4 with app router and configured MDX as per the documentation but was getting error while importing MDX file in a component - after adding mdxRs:true it worked. Thanks for sharing

[devjiwonchoi]

@pomber Hi, PR #57301 was landed at 13.5.7-canary.22 and is the exact fix of this issue. It should've worked on v14.

As there were a few changes in using MDX, opened a PR for the fix to your repro branch.

The main changes:

1. Use hello/page.mdx instead of hello.mdx just like the migration from Pages Router to App Router.
2. Configure pageExtensions at the next config. It is also documented here.

Please check out the MDX docs as it had several updates! Doc: https://nextjs.org/docs/app/building-your-application/configuring/mdx

[devjiwonchoi]

@victorteokw @t6adev @GrowthWizard @MananTank @ealexhaywood Were you guys able to manage it to work?

[MananTank]

@devjiwonchoi Update to latest version, The issue is fixed

[devjiwonchoi]

Closing as https://github.com/vercel/next.js/pull/57301 fixed this issue. For future readers, please open a new issue with the latest repro. Thank you!

[github-actions[bot]]

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