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

【问题标题】：Convert code returned by bundleMDX into HTML string for RSS while using mdx-bundler使用 mdx-bundler 时将 bundleMDX 返回的代码转换为 RSS 的 HTML 字符串
【发布时间】：2021-09-11 12:45:16
【问题描述】：

我想将 bundleMDX 返回的代码转换为我正在编写的 RSS 阅读器的字符串，这样我就可以将它与 ReactDOMServer.renderToStaticMarkup(mdx) 一起使用，例如：

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

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

我尝试使用 mdxSource 将代码包装在 MDXLayoutRenderer 中：

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' 指的是一个值，但在这里被用作一个类型。您的意思是“typeof MDXProvider”吗？ts(2749)

如果我将mdx 设为一个函数并从中返回值，那么它也不起作用：

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

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

我的示例与 Tailwind 博客完全相同，但有 1 个区别：我使用的是 mdx-bundler 而不是 next-mdx-remote

我该如何解决这个问题？

【问题讨论】：

你能提供一个minimal reproducible example吗？该错误提到 MDXProvider 被用作一种类型，但在您提供的代码中没有发生这种情况。
@juliomalves 当然可以。刚刚添加了一个编辑以指定MDXProvider。现在创建一个复制品:)
@juliomalves 在进行复制时，我找到了答案。奇怪啊。被卡在上面2-3周。刚刚发布在下面:)

标签： reactjs typescript next.js mdxjs

【解决方案1】：

Oopsie 在进行复制时，我再次收到此错误：

'MDXProvider' 指的是一个值，但在这里被用作一个类型。您的意思是“typeof MDXProvider”吗？ts(2749)

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

因此将扩展名更改为.tsx 并且它起作用了。在这个奇怪的问题上停留了大约 2-3 周。

【讨论】：