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
MarkBootsโ€ข8mo 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-...
Want results from more Discord servers?
Add your server