Issue Rendering MDX with Tanstack Start

[austinm911]

I'm having an issue rendering MDX in Tanstack Start.

Reproduction: https://stackblitz.com/edit/tanstack-router-mkpny79c?file=app%2Fcomponents%2Fblog-page.tsx

Navigate to the Blog page and then click on the MDX Example post, which renders the BlogPage component. You'll see the error below.

[1] Error in renderToPipeableStream: SyntaxError: Unexpected token '<'
[1]     at new Function (<anonymous>)
[1]     at new Function (https://tanstackroutermkpny79c-dhtu.w-credentialless-staticblitz.com/blitz.c8c182a3.js:40:1450639)
[1]     at getMDXExport (file:///home/projects/tanstack-router-mkpny79c/node_modules/mdx-bundler/dist/client.js#cjs:44:14)
[1]     at Module.getMDXComponent (file:///home/projects/tanstack-router-mkpny79c/node_modules/mdx-bundler/dist/client.js#cjs:24:21)
[1]     at eval (file:///home/projects/tanstack-router-mkpny79c/node_modules/@content-collections/mdx/dist/react/client.js:22:60)
[1]     at Object.useMemo (file:///home/projects/tanstack-router-mkpny79c/node_modules/react-dom/cjs/react-dom-server.node.development.js#cjs:5190:19)
[1]     at Module.useMemo (file:///home/projects/tanstack-router-mkpny79c/node_modules/react/cjs/react.development.js#cjs:1650:21)
[1]     at useMDXComponent (file:///home/projects/tanstack-router-mkpny79c/node_modules/@content-collections/mdx/dist/react/client.js:22:17)
[1]     at MDXContent (file:///home/projects/tanstack-router-mkpny79c/node_modules/@content-collections/mdx/dist/react/client.js:25:21)
[1]     at renderWithHooks (file:///home/projects/tanstack-router-mkpny79c/node_modules/react-dom/cjs/react-dom-server.node.development.js#cjs:5724:16) undefined

[austinm911]

It appears someone else has MDX working with Tanstack start as shown here: TanStack/router#3047 (comment) . Perhaps my code is just bad code as i'm less familiar with MDX. Haven't attempted to rewrite but i'll leave this up for now, but feel free to close this issue if there isn't an issue.

[sdorra]

I think the problem is that you are trying to compile mdx with a normal markdown parser:

const html = await compileMarkdown(context, document);
const mdx = await compileMDX(context, document);

You compile every file with markdown and mdx. The markdown compiler can't compile the mdx code, because it can't understand the react components. You can use the mdx compiler for mdx and normal markdown files.

[sdorra]

If the issue persists, please feel free to reopen it.