不能要求gatsby-plugin的注释和重新炒作插件。

Question

我试图按照文档的方式为gatsby添加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的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和patch-package，我在gatsby-config.js中获得了对esm的更新，并且：

1. 按以下方式修改gatsby-config.js (允许使用纯ES模块的require() ) 要求=要求(‘esm’)(模块)；module.exports ={ plugins：[{ rehypePlugins：gatsby-plugin-mdx，options：{rehypePlugins：[rehype-slug‘).default，
2. 试着运行Gatsby服务器，看看什么坏了。它将引发这样的错误： 错误:必须使用导入来加载ES模块:不支持ES模块的/Users/k/p/project/node_modules/rehype-slug/index.js require()。/Users/k/p/project/node_modules/rehype-slug/index.js () from /User/k/p/project/gatsby-config.js是一个ES模块文件，因为它是一个.js文件，其最近的父package.json包含"type"：“package.json”，它将包范围中的所有.js文件定义为ES模块。相反，将index.js重命名为以.cjs结尾，更改需要使用import()的代码，或从index.js中删除"type"：“.cjs” ...or是这样的： 错误: /Users/k/p/project/gatsby-config.js:1错误:必须使用导入加载ES模块: /Users/k/p/project/node_modules/rehype-slug/index.js
3. 请注意纯ESM包的位置，以便您可以找到与纯ESM包对应的package.json文件，并手动删除"type": "module",行，如下所示：

• “类型”：“模块”，

1. 运行yarn patch-package <pkg name> --exclude '^$'，它将记录您在package.json文件中所做的更改(每次运行yarn或npm install时由patch-package重新应用)。示例:对于顶级依赖纱线修补程序-包装依赖型-不包括传递依赖型纱线修补程序的“^$”#-不包括“^$”
2. 再次运行Gatsby服务器，并对每个纯ESM包重复步骤3和步骤4。

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

cc @Ir1d @kimbaudi @wardpeet @LekoArts

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

所有的功劳都归功于魔术师

Answer 2

在同一个GitHub讨论中有一个更简单、更优雅的解决方案

在根文件夹中创建require-esm.js (与package.json相同的位置)：

// Source: https://stackoverflow.com/a/71344589/2078908

const esm = require('esm')
const fs = require('fs')
const Module = require('module')

// Node: bypass [ERR_REQUIRE_ESM]
const orig = Module._extensions['.js']
Module._extensions['.js'] = function (module, filename) {
  try {
    return orig(module, filename)
  } catch (e) {
    const content = fs.readFileSync(filename, 'utf8')
    module._compile(content, filename)
  }
}

const _esmRequire = esm(module, {
  cjs: true,
  mode: 'all',
})

// don't pollute Module
Module._extensions['.js'] = orig

module.exports = function esmRequire(id) {
  return _esmRequire(id).default
}

然后在gatsby-config.js中像这样使用它：

require.esm = require('./require-esm')

module.exports = {
        .......
        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: ['.mdx', '.md'],
                rehypePlugins: [
                    // Generate heading ids for rehype-autolink-headings
                    [require.esm('rehype-slug')],
                    // To pass options, use a 2-element array with the
                    // configuration in an object in the second element
                    [require.esm('rehype-autolink-headings'), { behavior: "wrap" }],
                ],
            }
        },
        .......
}

更新

经过一些测试后，我将上面的代码简化为几行。它在我的设计中仍然有效。

在require.esm(...)中使用gatsby-config.js如下所示：

const requireEsm = require('esm')(module)
require.esm = id => requireEsm(id).default

module.exports = {
                .......
                rehypePlugins: [
                    // Generate heading ids for rehype-autolink-headings
                    [require.esm('rehype-slug')],
                    .......
}