Can't import the react client component in mdx files.

[annder]

Describe the bug
When I wrote a simple counter component and imported it into the mdx file to render as content, Nextjs said that the component was not supported.

To Reproduce
Steps to reproduce the behavior:

1. Create an mdx file in the data/blog fold and write some text, the content is filled in casually.
2. Create a react component named test.tsx and write content like：

'use client'

import { useState } from 'react'

const Index = () => {
  const [counter] = useState(0)
  return <div>{counter}</div>
}

export default Index

3. import the component path into mdx file like this:

import Test from "@/components/Test.tsx"

<Test />

5. And Nextjs will throw the error saying:useState 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/react-client-hook-in-server-component

Expected behavior
Successfully imported the component into mdx file and rendered it on the browse.

Screenshots
If applicable, add screenshots to help explain your problem.

System Info (if dev / build issue):

• OS: Windows
• Node version：20.17.0
• Npm version：10.8.2
• Next version：14.2.3

Browser Info (if display / formatting issue):

• Device PC
• Browser： Chrome
• Version ：128.0.6613.120

Additional context
I found the same issue in the nextjs issues, but During I attempt to search mdx-components.mdx file, all of the dirs can't be found.
vercel/next.js#47523

[timlrx]

This is a known issue with the current setup. As a workaround you can register the MDX components in components/MDXComponents.tsx. See example here.

[MiltonAkash]

@timlrx Adding things in MDXComponents works fine. But a small doubt. Will it then load all components for every page?

[dexcompiler]

@timlrx Adding things in MDXComponents works fine. But a small doubt. Will it then load all components for every page?

I presume you can simply use conditional logic to toggle on/off whatever component(s) you want activated/deactivated