不能要求 gatsby-plugin-mdx 的评论和重新炒作插件

Question

我试图遵循有关包含 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。即使使用全新的网站，问题仍然存在。任何有关此问题的帮助将不胜感激。

Answer 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 模块。

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

更新：我通过安装和以及rehype-slug@5.0.0在我的工作中获得了更新：gatsby-config.jsesmpatch-package

1. 修改gatsby-config.js如下（以允许require()使用纯 ES 模块）

   require = require('esm')(module);
   
   module.exports = {
     plugins: [
       {
         resolve: `gatsby-plugin-mdx`,
         options: {
           rehypePlugins: [
             require('rehype-slug').default,
   

2. 尝试运行 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
   

3. 记下纯 ES Modules 包的位置，以便您可以找到package.json与纯 ESM 包对应的文件，并手动删除该行，"type": "module",如下所示：

   -  "type": "module",
   

4. Run yarn patch-package <pkg name> --exclude '^$'，它将记录您在文件中所做的更改（每次运行或时package.json都会重新应用）。例子：patch-packageyarnnpm install

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

5. 再次运行 Gatsby 开发服务器，并对每个纯 ESM 包重复步骤 3 和 4。

那时，我可以使用新的纯 ESM 依赖项版本启动 Gatsby 开发服务器。

抄送@Ir1d @kimbaudi @wardpeet @LekoArts

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

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