Convert code returned by bundleMDX into HTML string for RSS while using mdx-bundler

Question

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:

import { MDXProvider } from '@mdx-js/react'

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?

Answer 1

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.