How to inject "use client" directive

[wereHamster]

Is there a way to inject a "use client" directive at the top of the module that mdx-js compiler generates? Either via something in the .mdx file itself or via a plugin.

The "use client" directive is required when the providerImportSource option points to a React hook (which are not allowed in React Server Components).

[remcohaszing]

To directly address your question: Yes, you could definitely create a recma plugin that injects the "use client" directive.

The counter question is: Should you? MDX files typically contain a lot of text content that benefits from SSR.

This likely comes up, because you’re pointing providerImportSource to @mdx-js/react in a Next.js application. You should use mdx-components.ts instead.