不能要求 gatsby-plugin-mdx 的 remark 和 rehype 插件答案

【问题标题】：Can't require remark and rehype plugins for gatsby-plugin-mdx不能要求 gatsby-plugin-mdx 的 remark 和 rehype 插件
【发布时间】：2021-11-08 23:16:04
【问题描述】：

我正在尝试关注documentation 包括 gatsby-plugin-mdx 的 rehype 插件。具体来说，我试图使用rehype-slug 插件。我安装了 npm 打包并将我的gatsby.config.js 文件设置为

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "test Website",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-mdx",
      options:{
        rehypePlugins: [
          require("rehype-slug")
        ]
      }
    }
  ],
};

但是，在运行 gatsby develop 时，我遇到了以下错误：

Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\User\Documents\test-site\node_modules\rehype-slug\index.js require() of ES modules is not supported.

我在尝试使用 remark-math 和 rehype-katex 插件时遇到了类似的问题。我正在使用 Gatsby CLI 的 3.13.0 版本。即使使用全新的网站，问题仍然存在。对此问题的任何帮助将不胜感激。

【问题讨论】：

在 gatsby 解决 esm 问题之前，将 rehype-slug 降级到 4.0.1 使其工作。

标签： gatsby remarkjs gatsby-plugin-mdx

【解决方案1】：

不确定它是否会起作用，但是，您是否尝试过类似的方法，而不是使用 ES 模块中的 require：

import slug from 'rehype-slug'

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "test Website",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-mdx",
      options:{
        rehypePlugins: [
          slug 
        ]
      }
    }
  ],
};

基于：https://github.com/rehypejs/rehype-slug

或者直接导入到rehypePlugins里面作为动态导入。

我做了一些研究，发现不支持动态导入，因为您无法访问回调中的值，因此等待导入也不是解决方案，也不是使用ES module。

但是，可以在GitHub discussion 中找到具有完全相同用例的最终解决方案（或至少是临时工作解决方案）：

更新：我通过安装esm 和patch-package 并在我的gatsby-config.js 工作中获得了rehype-slug@5.0.0 的更新：
如下修改gatsby-config.js（允许require()使用纯ES模块）
require = require('esm')(module);

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        rehypePlugins: [
          require('rehype-slug').default,
尝试运行 Gatsby 开发服务器，看看有什么问题。它会抛出这样的错误：
  Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
  require() of ES modules is not supported.
  require() of /Users/k/p/project/node_modules/rehype-slug/index.js from /Users/k/p/project/gatsby-config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
  Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/k/p/project/node_modules/rehype-slug/package.json.
...或者像这样：
  Error: /Users/k/p/project/gatsby-config.js:1
  Error: Must use import to load ES Module: /Users/k/p/project/node_modules/rehype-slug/index.js
记下纯ES Modules包的位置，这样就可以定位到纯ESM包对应的package.json文件，手动去掉"type": "module",行，如下：
-  "type": "module",
运行yarn patch-package <pkg name> --exclude '^$'，它将记录您在package.json 文件中所做的更改（每次运行yarn 或npm install 时都会由patch-package 重新应用）。例子：
# For a top-level dependency
yarn patch-package rehype-slug --exclude '^$'

# For a transitive dependency
yarn patch-package rehype-slug/unist-util-visit --exclude '^$'
再次运行 Gatsby 开发服务器，对每个纯 ESM 包重复步骤 3 和 4。
那时，我可以使用新的纯 ESM 依赖版本启动 Gatsby 开发服务器。

cc @Ir1d @kimbaudi @wardpeet @LekoArts

警告：在我的具体情况下，我还需要修补其中一个依赖项 (hast-util-heading-rank)，因为我得到了一个未定义的 node.tagName，但我认为这与这个问题无关——可能与另一个问题有关.

所有功劳归相关魔术师所有

【讨论】：