Cupertino Posts - Answer Overflow

Cupertino

•Created by Cupertino on 3/9/2025 in #support

Remote MDX on SolidStart

Inspired on the next.js code in https://mdxjs.com/guides/mdx-on-demand/, I've made my attempt of implementing on demand rendering with SolidStart:

// ~/components/MDXRenderer.tsx
import { createSignal, Signal, createEffect } from "solid-js"
import { MDXProvider } from "solid-mdx"
import { createAsync, query } from "@solidjs/router"
import { compile, run } from "@mdx-js/mdx"
import * as runtime from "solid-js/jsx-runtime"
import { Dynamic } from "solid-js/web"

const renderMDX = query(async (url: string) => {
    "use server"
    const mdxFile = await fetch(url)
    const mdx = await mdxFile.text()

    const compiledMdx = await compile(mdx, {
        outputFormat: "function-body",
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        jsx: true
    })
    return String(compiledMdx)
}, "mdx")

export default function MDXRenderer(props: { url: string }) {
    const [mdxContent, setMdxContent] = createSignal(undefined)
    const mdx = createAsync(() => renderMDX(props.url))

    createEffect(async () => {
        if (!mdx()) return

        const { default: Content } = await run(mdx()!, { ...runtime, baseUrl: import.meta.url })
        setMdxContent(Content)
    })

    return (
        <MDXProvider components={{}}>
            {mdxContent() ? <Dynamic component={mdxContent()} /> : "Loading..."}
        </MDXProvider>
    )
}

// ~/components/MDXRenderer.tsx
import { createSignal, Signal, createEffect } from "solid-js"
import { MDXProvider } from "solid-mdx"
import { createAsync, query } from "@solidjs/router"
import { compile, run } from "@mdx-js/mdx"
import * as runtime from "solid-js/jsx-runtime"
import { Dynamic } from "solid-js/web"

const renderMDX = query(async (url: string) => {
    "use server"
    const mdxFile = await fetch(url)
    const mdx = await mdxFile.text()

    const compiledMdx = await compile(mdx, {
        outputFormat: "function-body",
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        jsx: true
    })
    return String(compiledMdx)
}, "mdx")

export default function MDXRenderer(props: { url: string }) {
    const [mdxContent, setMdxContent] = createSignal(undefined)
    const mdx = createAsync(() => renderMDX(props.url))

    createEffect(async () => {
        if (!mdx()) return

        const { default: Content } = await run(mdx()!, { ...runtime, baseUrl: import.meta.url })
        setMdxContent(Content)
    })

    return (
        <MDXProvider components={{}}>
            {mdxContent() ? <Dynamic component={mdxContent()} /> : "Loading..."}
        </MDXProvider>
    )
}

However, I'm getting the following error:

Uncaught (in promise) SyntaxError: expected expression, got '<'
    run2 run.js:15
    MDXRenderer2 MDXRenderer.tsx:29

Uncaught (in promise) SyntaxError: expected expression, got '<'
    run2 run.js:15
    MDXRenderer2 MDXRenderer.tsx:29

Could someone help me?

1 replies

Gaming

Programming