javascript - Using Remark and Rehype plugins with MDX in Next.js (with @nextmdx) - Stack Overflow

admin管理员组

文章数量:1291126

I was trying to use Github Flavored Markdown using @next/mdx but I can't seem to figure out how to use plugins with the code. Here is what I did:

(I am following along from Next.js Documentation: )

---

Initializing the Application

1. I created the Next.js App using the mand

yarn create next-app next-gfm

2. I then added the required modules to the

yarn add @next/mdx @mdx-js/loader

3. In the pages/ directory, I deleted the index.js file that was auto generated and replaced it using a index.mdx file.

From here, I used the following configuration for my next.config.js file.

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

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

If we run the code using yarn dev everything works fine so far.

Adding GFM

Here is where the main issue is. I now installed the following packages to use Github Flavored Markdown using the mand:

yarn add remark-gfm rehype-stringify

Import Syntax Error?

I tried to import the modules in the next.config.js using the syntax

import remarkGfm from 'remark-gfm'

But this gives me the following error:

import remarkGfm from 'remark-gfm'
^^^^^^

SyntaxError: Cannot use import statement outside a module

Making the project a module

I have also tried adding the following line at the top of my package.json

"type" : "module",

But this seems to conflict with the require syntax that is being used to import @next/mdx:

const withMDX = require('@next/mdx')({
...

This gave me the error:

Failed to load next.config.js, see more info here 

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Using older import() syntax

I did a bit of searching online, and found the import() syntax. I attempted to do this and my next.config.js now looked like:

const remarkGfm  = import('remark-gfm');
const remarkParse  = import('remark-parse')
const remarkRehype  = import('remark-rehype')
const rehypeStringify  = import('rehype-stringify')

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

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

I tried running this, using the yarn dev and everything works, except that none of the markdown plugins are functioning at all. (The base markdown is working but if I try using footnotes, or tables it is rendered as plain text).

Could anyone explain how one might proceed using external plugins (e.g Github Flavored Markdown) with MDX and Next.js (using the @next/mdx package)?

Reference

This is my plete project structure and (relevant) files:

next-gfm
  |_ pages
       |_ index.md
  |_ package.json
  |_ next.config.js

Files

index.md

# GFM

## Autolink literals

www.example, , and [email protected].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

package.json

{
  "name": "next-mdx-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^2.1.1",
    "@next/mdx": "^12.1.5",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "rehype-katex": "^6.0.2",
    "rehype-stringify": "^9.0.3",
    "remark-gfm": "^3.0.1",
    "remark-math": "^5.1.1",
    "remark-mdx": "^2.1.1"
  },
  "devDependencies": {
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5"
  }
}

next.config.js

const remarkGfm  = import('remark-gfm');
const remarkParse  = import('remark-parse')
const remarkRehype  = import('remark-rehype')
const rehypeStringify  = import('rehype-stringify')

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

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

I was trying to use Github Flavored Markdown using @next/mdx but I can't seem to figure out how to use plugins with the code. Here is what I did:

(I am following along from Next.js Documentation: https://nextjs/docs/advanced-features/using-mdx)

---

Initializing the Application

1. I created the Next.js App using the mand

yarn create next-app next-gfm

2. I then added the required modules to the

yarn add @next/mdx @mdx-js/loader

3. In the pages/ directory, I deleted the index.js file that was auto generated and replaced it using a index.mdx file.

From here, I used the following configuration for my next.config.js file.

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

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

If we run the code using yarn dev everything works fine so far.

Adding GFM

Here is where the main issue is. I now installed the following packages to use Github Flavored Markdown using the mand:

yarn add remark-gfm rehype-stringify

Import Syntax Error?

I tried to import the modules in the next.config.js using the syntax

import remarkGfm from 'remark-gfm'

But this gives me the following error:

import remarkGfm from 'remark-gfm'
^^^^^^

SyntaxError: Cannot use import statement outside a module

Making the project a module

I have also tried adding the following line at the top of my package.json

"type" : "module",

But this seems to conflict with the require syntax that is being used to import @next/mdx:

const withMDX = require('@next/mdx')({
...

This gave me the error:

Failed to load next.config.js, see more info here https://nextjs/docs/messages/next-config-error

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Using older import() syntax

I did a bit of searching online, and found the import() syntax. I attempted to do this and my next.config.js now looked like:

const remarkGfm  = import('remark-gfm');
const remarkParse  = import('remark-parse')
const remarkRehype  = import('remark-rehype')
const rehypeStringify  = import('rehype-stringify')

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

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

I tried running this, using the yarn dev and everything works, except that none of the markdown plugins are functioning at all. (The base markdown is working but if I try using footnotes, or tables it is rendered as plain text).

Could anyone explain how one might proceed using external plugins (e.g Github Flavored Markdown) with MDX and Next.js (using the @next/mdx package)?

Reference

This is my plete project structure and (relevant) files:

next-gfm
  |_ pages
       |_ index.md
  |_ package.json
  |_ next.config.js

Files

index.md

# GFM

## Autolink literals

www.example., https://example., and [email protected].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

package.json

{
  "name": "next-mdx-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mdx-js/loader": "^2.1.1",
    "@next/mdx": "^12.1.5",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "rehype-katex": "^6.0.2",
    "rehype-stringify": "^9.0.3",
    "remark-gfm": "^3.0.1",
    "remark-math": "^5.1.1",
    "remark-mdx": "^2.1.1"
  },
  "devDependencies": {
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5"
  }
}

next.config.js

const remarkGfm  = import('remark-gfm');
const remarkParse  = import('remark-parse')
const remarkRehype  = import('remark-rehype')
const rehypeStringify  = import('rehype-stringify')

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

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

• javascript
• reactjs
• next.js
• markdown
• mdxjs

Share Improve this question Follow edited Apr 14, 2022 at 14:09 mxix 3,65911 gold badge1717 silver badges2424 bronze badges asked Apr 13, 2022 at 21:45 chadgamer3301chadgamer3301 4311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

ES Modules are supported if you rename the config file to next.config.mjs.

Sources

• https://stackoverflow./a/69781269/4811678
• https://nextjs/docs/api-reference/next.config.js/introduction

In your case it might look like,

next.config.mjs

import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
    rehypePlugins: [rehypeStringify],
  },
})

export default withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

next-mdx-remote users:

Run npm i remark-gfm

Create a file mdSerializer.ts, and inside:

import { serialize } from 'next-mdx-remote/serialize';
import remarkGfm from 'remark-gfm';

const mdSerialize = async (source: string) => {
  return await serialize(source, {
    mdxOptions: { remarkPlugins: [remarkGfm] },
  });
};

export { mdSerialize };

Import mdSerialize anywhere you'd normally import serialize

---

For more details around the serialize API, here

Gfm example from the original mdx site, here

本文标签： javascriptUsing Remark and Rehype plugins with MDX in Nextjs (with nextmdx)Stack Overflow