Loading multiple Markdown files and rendering them into one React component

[nickw1]

Hi,

One thing I'd like to do is develop an app which will load various Markdown source files, combine them with content generated from a database (interactive exercises) and render an entire React component with the combination of inputs (i.e. multiple Markdown files plus database-generated content).

Specifically this is for an interactive learning tool I'm developing, in which content becomes visible once you've answered questions (https://github.com/nickw1/lilt if you're interested, currently client-side React only).

I can see that I could use something like react-remark to do this from first principles. However given react-server's native Markdown/MDX support, I'm wondering if there is a "shortcut" method that could be used?

Thanks.

[lazarv]

Hi @nickw1,

your project looks very interesting and thanks for including react-server as an RSC introductory framework!

Right now native Markdown/MDX support is restricted only to pages when using the file-system based router. But as react-server is using Vite, you can just use the same Vite plugin the framework uses to transform any MDX to React components. react-server is using @mdx-js/rollup and together with some awesome Remark of Rehype plugins it can be very nice. While the official documentation at https://mdxjs.com/packages/rollup/ is for Rollup, but it works with Vite too.

// vite.config.mjs
import { defineConfig } from "vite";
import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [mdx()],
});

After that, you can just import your MDX file as a React component. To use your MDX import in TypeScript, you have to declare your MDX modules the following way:

declare module "*.mdx" {
  const content: string;
  export default content;
}

[nickw1]

Hi @lazarv,

Many thanks for your answer and glad you find my project interesting!
Will take a look at @mdx-js/rollup and see what I can do. Thanks again.