Не могу требовать замечаний и перефразирования плагинов для gatsby-plugin-mdx

Question

Я пытался следовать документации по включению плагинов rehype для gatsby-plugin-mdx. В частности, я пытался использовать rehype-slugплагин. Я установил пакет с npm и установил свой gatsby.config.js файл в

Однако при беге 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плагины. Я использую версию 3.13.0 интерфейса командной строки Gatsby. Проблема сохраняется даже с совершенно новым веб-сайтом. Мы будем очень благодарны за любую помощь в этом вопросе.

Answer 1

Не уверен, что это сработает, но вместо использования модулей require from ES вы пробовали что-то вроде:

      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 как динамический импорт.

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
}

Затем используйте его следующим образом:

      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')],
                    .......
}