1 reply

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)

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 |

Next JS MDX

Similar Threads

Next JS MDX

Similar Threads

Similar Threads

Similar Threads