kentcdodds / mdx-bundler

🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
MIT License
1.76k stars 75 forks source link

Convert `code` returned by `bundleMDX` into HTML `string` for RSS #94

Closed deadcoder0904 closed 3 years ago

deadcoder0904 commented 3 years ago

I want to convert code returned by bundleMDX to string for RSS reader I'm writing so I can use it with ReactDOMServer.renderToStaticMarkup(mdx) like:

https://github.com/tailwindlabs/blog.tailwindcss.com/blob/acb8dcfbc733e25c0e1f4e8af5323da421071cbc/scripts/build-rss.js#L36

The Tailwind Blog above uses next-mdx-remote where it works but I'm not sure how to do the similar thing in mdx-bundler.

I've tried wrapping code in MDXLayoutRenderer using mdxSource:

export const MDXLayoutRenderer = ({ mdxSource, ...rest }: IMDXLayoutRenderer): JSX.Element => {
    const MDXLayout = React.useMemo(() => getMDXComponent(mdxSource), [mdxSource])

    return <MDXLayout components={MDXComponents as any} {...rest} />
}
.
.
.

const mdx = (
    <MDXProvider>
        <MDXLayoutRenderer mdxSource={code} />
    </MDXProvider>
)

But this throws weird TS errors like:

'MDXProvider' refers to a value, but is being used as a type here. Did you mean 'typeof MDXProvider'?ts(2749)

If I make mdx a function & return the value from it, then also it doesn't work:

const mdx = () => (
            <MDXProvider>
                <MDXLayoutRenderer mdxSource={code} />
            </MDXProvider>
        )

All I need is to pass a html formatted string so that I can send it to RSS package feed.

My example is exactly similar to the Tailwind Blog with 1 difference: I'm using mdx-bundler instead of next-mdx-remote

How can I solve this problem?

deadcoder0904 commented 3 years ago

Oopsie while making a repro, I again got this error:

'MDXProvider' refers to a value, but is being used as a type here. Did you mean 'typeof MDXProvider'?ts(2749)

This error is weird but as this file was small, I noticed the extension I had was .ts but I was using JSX in the mdx function.

So changed the extension to .tsx & it worked. Was stuck on this weird problem for like 2-3 weeks.

doougui commented 1 year ago

Where does MDXProvider and MDXLayoutRenderer come from? It appears that this is neither exported by mdx-bundler nor mdx-bundler/client :/

doougui commented 1 year ago
MDXLayoutRenderer 

Nvm. I just saw that MDXLayoutRenderer is a custom component you created 😀