问题标签 [mdxjs]

问题

如何将“段落”节点替换为 MDX 的“html”节点？

背景

将每个“twitter.com”链接替换为扩展的 Twitter，在 MDX 内容中嵌入 HTML。

可重现的 CodeSandbox：https ://codesandbox.io/s/dazzling-curran-2bcwe?file=/src/index.mjs:2024-3439

问题

我有一个 MDX 内容，其中包含 twitter 链接列表（例如https://twitter.com/BrendanEich/status/1151317825908166656），替换段落节点会导致以下错误

../node_modules/esbuild/lib/main.js:869:27：错误：[插件：esbuild-xdm] 无法在 failureErrorWithLog (/sandbox/node_modules/esbuild/lib/main.js: 1449:15) 在 /sandbox/node_modules/esbuild/lib/main.js:1131:28 在 runOnEndCallbacks (/sandbox/node_modules/esbuild/lib/main.js:921:63) 在 buildResponseToResult (/sandbox/node_modules/esbuild /lib/main.js:1129:7) 在 /sandbox/node_modules/esbuild/lib/main.js:1236:14 在 /sandbox/node_modules/esbuild/lib/main.js:609:9 在 handleIncomingPacket (/sandbox /node_modules/esbuild/lib/main.js:706:9) 在 Socket.readFromStdout (/sandbox/node_modules/esbuild/lib/main.js:576:7) 在 Socket.emit (events.js:315:20)在 addChunk (internal/streams/readable.js:309:12)

有问题的代码

我想将返回的代码转换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.

我尝试在MDXLayoutRendererusing中包装代码mdxSource：

但这会引发奇怪的 TS 错误，例如：

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

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

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

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

我怎么解决这个问题？

我next-mdx-remote在我的 next.js 应用程序中使用。我传递给它的组件之一通过 axios 进行 API 调用。这工作正常。然而，我现在想搬到那里react-query。我收到以下错误：

没有设置QueryClient，使用QueryClientProvider设置一个

我想我理解这个错误，但问题是我的文件中有一个QueryClient集合 。通过 react-query 获取也适用于不属于我的 MDX 结构的其他页面和组件。QueryClientProvider_app.js

我想知道现在该怎么办？我是否需要对其进行配置next-mdx-remote以了解我的 QueryClient 在哪里？例如这里：

通过 react-query 获取的组件是components我在这里传递的这个对象的一部分。但是，默认情况下，nextjs 中的所有内容都是通过_app.js- 所以我不明白为什么它找不到它？

_app.js：

（这一切都适用于非 mdx 上下文）

我有点困惑。我认为 remark 是一个降价处理器，rehype 是一个 html 处理器。所以 remark 需要一些降价，转换它，然后给我一些降价。Rehype 需要一些 html，对其进行转换，然后给我一些 html - 这是正确的吗？

我遇到了这些包裹remark-slug，rehype-slug它们基本上都做同样的事情。我真的不明白为什么一个人会使用一个而不是另一个？是否有我不知道的优点或缺点（如安全风险、访问某些变量）？或者对于何时使用什么有普遍的共识？

链接： remark slug rehype slug

几乎所有在线参考文献都提到了将MDX与 React.js 一起使用。即使其他框架或库支持 MDX（在组件的帮助下），我还没有特别看到在 React 之外使用“.mdx”文件格式。

Gatsby 和 Next.js 中对“.mdx”文件的支持允许我们为博客文章创建一个单独的文件夹并将它们存储在有助于组织的任何地方（CMS、Github 等）。并且“.mdx”的文件扩展名本身非常简单明了，即使是初学者也能理解这个概念。

所以我只是想知道 - 如果我想使用 mdx 文件，我是否仅限于 React.js？是否也可以使用 Svelte、Vue、Angular？

我目前正在将 mdx 集成到我的 vue 3 typescript 项目中。但是，在配置 vue.config.js 时出现以下错误：

我的 vue.config.js：

我的 package.json：

我不使用时的错误"type": "module"：

我的 tsconfig.json：

我用 node.js v14 和 v16 尝试了整个过程。我也每次都删除了我的 node_modules。

如果我将文件重命名为vue.config.mjs错误消失，但是 mdx-loader 不再工作。

完整项目：https ://github.com/jannikbuscha/mdx-vue3

我有两个组件，ItemA& ItemB：

项目A：

B项：

我在 MDX 文件中使用这些next-mdx-remote. ItemA 用于内联，ItemB 在任何文本之外：

我现在希望我的 ItemAs 是彩色的（红色和蓝色），而我的 ItemBs 是黑色/无样式的。但是，我的 ItemB 正在按顺序接管我的 ItemAs 的样式：

当我将 ItemAs 移动到文本上方（并且不要内联使用它们）时，一切正常：

我还注意到，当我将divItemA 中的最外层变为 aspan时，即使 ItemA 内联使用，事情也会再次按预期工作：

但是，我不知道为什么以及罪魁祸首可能是什么？是next-mdx-remote吗？还是mdx一般来说？

希望你们都玩得开心。我正在开发一个简单的 NextJs 应用程序，我想在其中包含多个子域。我正在vercel上部署应用程序。

我的应用程序所做的是它有一个简单的文本区域，您可以在其中编写 MDX，单击“发布”按钮，它将将该 MDX 保存到 firebase firestore。在文本区域下方，它显示了之前发布的所有页面的列表。

应用程序呈现所有页面的列表，例如随机生成的页面名称作为子域，而实际域稍后出现，如下所示。

当我打开该 URL 时，它将从 firestore 获取页面 MDX 并使用 next-mdx-remote 包来序列化和呈现 MDX。使用 next-mdx-remote 包的原因是我们可以在 MDX 中添加 react 组件，它可以像普通的 react 组件一样渲染。我已经有一个自定义域，因为您不能在 vercel 免费部署中的免费子域之上拥有一个子域。

在 localhost 上一切正常，一切正常，但问题是当我在 Vercel 上部署代码并导航到子域时，它在网站上显示 ERROR 500 并在日志中显示以下错误。

据我了解，next-mdx-remote 序列化函数在其中使用 esbuild，当我在 vercel 上部署应用程序时，npm 只是不下载它的平台特定包，但可能是我错了。

我试图为此搜索解决方案，但没有任何答案可以帮助我。

以下是应用程序使用的所有代码。

我正在使用 Docusaurus 为项目构建文档网站。内容被写入为 MDX 文件。由于该项目有不同的版本，我想使用包含特定版本的链接。例如，对于 1.0 版，链接应如下所示：

对于 2.0 版，相同的链接应如下所示：

我尝试在内部构建一个/docs返回版本字符串的简单组件，并且由于它在内部，因此每次创建新版本时都会/docs将其复制到文件夹中：versioned_docs

但是我不确定如何在 MDX 文件中使用它。这不起作用：

知道什么是正确的方法吗？

这是我单击链接时不断出现的错误消息。