Import a client component with extension .mjs in MDX

🔙 Read in 7 min., written by ipikuka

1. Import a Client Component

The relative link is relative to the module which MDXRemote called, since the baseUrl is setted as import.meta.url in the options.

import ExampleForm from "../../../mdxComponents/ExampleForm.mjs";

<ExampleForm /> client component doesn't work due to lack of React.useState in the server

2. Import a Client Component via dynamic import

The relative link is relative to the module which MDXRemote called, since the baseUrl is setted as import.meta.url in the options.

export const ExampleForm = (await import("../../../mdxComponents/ExampleForm.mjs")).default;

<ExampleForm /> client component doesn't work due to lack of React.useState in the server