Kevin Powell - Community•9mo ago

Next JS MDX

Plugins in mdx do not work. I have configured everything in next-config.mjs and created mdx-components.tsx in the root folder, but plugins refuse to work (all of them). Environment Information

npx --no-install next info

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 21.6.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2

npx --no-install next info

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 21.6.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2

// next.config.mjs
import createMDX from '@next/mdx'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
import remarkMdx from 'remark-mdx'
// Abstract from **next.config.mjs**
const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkMdx,remarkGfm],
    rehypePlugins: [rehypeAutolinkHeadings, rehypePrettyCode, rehypeSlug],
  },
})

export default withMDX(nextConfig)

// next.config.mjs
import createMDX from '@next/mdx'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
import remarkMdx from 'remark-mdx'
// Abstract from **next.config.mjs**
const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkMdx,remarkGfm],
    rehypePlugins: [rehypeAutolinkHeadings, rehypePrettyCode, rehypeSlug],
  },
})

export default withMDX(nextConfig)

The table shall look like this

| Column 1      | Column 2      | Column 3      |
| ------------- | ------------- | ------------- |
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |

| Column 1      | Column 2      | Column 3      |
| ------------- | ------------- | ------------- |
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |

But it simply appear in <p> tags as a raw paragraph and I dont know what's the issue. I came across the same problem in the Next JS repo, however their solutions did not help me. Expected Behavior Proper work of all plugins Browser Using Chrome Version 122.0.6261.129 (Official Build), (64 bit)

1 Reply

MarkBoots•9mo ago

no experience with it, but what does your nextConfig object look like? maybe check this topic: https://github.com/vercel/next.js/discussions/36310

GitHub

How to import remark plugins (remark-gfm) in next.config.js? · verc...

I basically have the same question as this stack overflow question and I haven't been able to find any answers on any forum or docs. I'm working with @next/mdx and I want to use the remark-...

Gaming

Programming

Next JS MDX