如何在 next.config.js 中导入 remark-gfm？答案

【问题标题】：How to import remark-gfm in next.config.js?如何在 next.config.js 中导入 remark-gfm？
【发布时间】：2022-06-25 22:31:07
【问题描述】：

我想在 next.js 和 remark-gfm 插件中使用 MDX。我找到了Next.js Docs about MDX 并遵循了这个。并添加导入语句。

// next.config.js
import remarkGfm from 'remark-gfm;'

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: []
  }
})

module.exports = withTM(
  withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  })
)

我执行了npm run dev，出现了错误。 SyntaxError: Cannot use import statement outside a module

我尝试将import 更改为require，但出现另一个错误。

Error [ERR_ERQUIRE_ESM]: require() of ES Module /home/me/myblog/node_modules/remark-gfm/index.js from /home/me/myblog/next.config.js not supported.

如何导入 remark-gfm？不可能吗？

【问题讨论】：

我无法解决此错误。为了通过插件将 mdx 转换为 JSX，我在 @mdx-js/mdx 使用了 compile 函数。 compile 以字符串格式返回 JSX builder 函数，我必须将其转换为 Function 并像这样调用此函数 const JSXObject = Function(compiled)(React) 这是复杂且不优雅的方式。
我有理由确定我已经在 StackOverflow 上看到了这个问题的答案。你搜索过吗？我记得，一种解决方案涉及需要一个带有type="module" 之类的package.json 文件。

标签： javascript next.js mdxjs remarkjs

【解决方案1】：

我通过将 next.config.js 的文件名更改为 next.config.mjs 以支持 ES 模块来使其工作。

文件： next.config.mjs

import nextMdx from '@next/mdx';
import remarkGfm from 'remark-gfm;'

const withMDX = nextMdx({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: []
  }
});

const nextConfig = {
  reactStrictMode: true,
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
};

export default withMDX(nextConfig);

【讨论】：