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

• 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 v13.4.20-canary.31...v13.4.20-canary.32

I think this is related to #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