MDX support in tanstack start with file-based routing

[GarrisonBates]

I'm looking to use MDX in my Start project but I can't find any documentation on the topic. I've added @mdx-js/rollup but of course the file router still doesn't pick up .mdx files.

Is there any built-in way to handle this, so that all .mdx files are rendered as pages in the file-based router? If not this would be a great feature to see in the future, similar to @next/mdx.

Also, if this doesn't yet exist, does anyone have any suggestions as to the cleanest way to implement this? Would prefer to avoid having to create a .tsx file for each route and then import and render the mdx in the RouteComponent.

[Palmik]

Dependencies:

pnpm add -D @mdx-js/rollup @types/mdx
pnpm add @mdx-js/react

(1) In vite.config.js import mdx from '@mdx-js/rollup' and add it to the plugins.

(2) In tsconfig.json, add "mdx" to the types array.

(3) In routes, create foo/index.tsx and foo/content.mdx, and inside index.tsx:

import { createFileRoute } from '@tanstack/react-router';

import { MDX_COMPONENTS } from '#components/mdx/index';

import Content from './content.mdx';

export const Route = createFileRoute('/foo/')({
  component: RouteComponent,
});

function RouteComponent() {
  return <Content components={MDX_COMPONENTS} />;
}