在使用mdx-bundler时，将bundleMDX返回的代码转换为RSS的HTML字符串

Question

我想将bundleMDX返回的代码转换为我正在编写的RSS阅读器的字符串，因此我可以使用ReactDOMServer.renderToStaticMarkup(mdx)，如:

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

上面的顺风博客使用next-mdx-remote，但我不确定如何在mdx-bundler中做类似的事情。

我试过在MDXLayoutRenderer中使用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>
)

但是这会抛出奇怪的TS错误，比如:

'MDXProvider'引用一个值，但在这里被用作类型。你的意思是"MDXProvider的类型"吗?

如果我让mdx成为一个函数&返回它的值，然后它也不起作用:

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

我所需要的是传递一个html格式的字符串，以便我可以将它发送到RSS包提要。

我的例子与顺风博客完全相似，但有一点不同:我使用mdx-bundler而不是next-mdx-remote

我该如何解决这个问题?

Answer 1

在进行复制时，我又得到了这个错误:

'MDXProvider'引用一个值，但在这里被用作类型。你的意思是"MDXProvider的类型"吗?

这个错误很奇怪，但由于这个文件很小，我注意到我的扩展名是.ts，但我在mdx函数中使用JSX。

所以将扩展名改为.tsx&它工作。我被这个奇怪的问题困了2-3周。