How to import remark-gfm in next.config.js?

Question

I want to use MDX in next.js and remark-gfm plugin. I found Next.js Docs about MDX and follow this. and add import statement.

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

I executed npm run dev, and error occurs. SyntaxError: Cannot use import statement outside a module

I tried changing import to require, but another error occurs.

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.

How can i import remark-gfm? Is it impossible?

Answer 1

I got it to work by changing the file name of next.config.js to next.config.mjs to support ES Modules.

File: 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);