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

Question

我想将 bundleMDX 编写的 return 代码转换为 RSS reader 的字符串 reader 我正在写，这样我就可以将它与 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' refers to a value, but is being used as a type here. Did you mean 'typeof MDXProvider'?ts(2749)

如果我将 mdx 设为一个函数并且 return 它的值，那么它也不起作用：

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

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

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

我该如何解决这个问题？

Answer 1

哎呀，在重现时，我又遇到了这个错误：

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

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

因此将扩展名更改为 .tsx 并且成功了。被这个奇怪的问题困扰了大约 2-3 周。

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

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

typescript

reactjs

next.js

mdxjs