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?
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);