Import a server component with extension .mjs in MDX

🔙 Read in 9 min., written by ipikuka

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

1. Import a React Server Component

runtime	<Bar />    component
classic	import Bar from "../../../mdxComponents/Bar.mjs";
	Imports work, Hello from imported <Bar /> server component.
automatic	import Bar from "../../../mdxComponents/Bar-runtime-automatic.mjs";
	Imports work, Hello from imported <Bar /> server component.

Here is a RSC that fetchs a text from an API.

runtime	<Text />    component
classic	import Text from "../../../mdxComponents/Text.mjs";
	Hello from imported <Text /> server component --> Armadillo
automatic	import Text from "../../../mdxComponents/Text-runtime-automatic.mjs";
	Hello from imported <Text /> server component --> Armadillo

2. Import a React Server Component via dynamic import

runtime	<Bar />    component
classic	export const Bar = (await import("../../../mdxComponents/Bar.mjs")).default;
	Imports work, Hello from imported <Bar /> server component.
automatic	export const { default: Bar } = (await import("../../../mdxComponents/Bar-runtime-automatic.mjs"));
	Imports work, Hello from imported <Bar /> server component.

Here is a RSC that fetchs a text from an API.

runtime	<Text />    component
classic	export const Text = (await import("../../../mdxComponents/Text.mjs")).default;
	Hello from imported <Text /> server component --> Armadillo
automatic	export const { default: Text } = (await import("../../../mdxComponents/Text-runtime-automatic.mjs"));
	Hello from imported <Text /> server component --> Armadillo