MDX plugins are ignored in @next/mdx 13.2.1

[kirill-konshin]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

➜  workspace git:(master) ✗ npx --no-install next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.2.3-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

MDX (@next/mdx)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/nextjs-mdx-plugins-ignored-4y7x8n

To Reproduce

Options provided to nextMDX are ignored:

import nextMDX from "@next/mdx";

const withMDX = nextMDX({
  options: {
    remarkPlugins: [remarkGfm, remarkFrontmatter],
    rehypePlugins: [rehypeHighlight],
  },
});

Describe the Bug

Open the page https://4y7x8n-3000.p.csb.app

Frontmatter is not parsed, code block contains raw codeblocks without highlighting, no GFM applied:

Expected Behavior

Proper work of all plugins.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Codesandbox

[pokuwagata]

same here

[plastic041]

https://github.com/vercel/next.js/issues/43656#issuecomment-1445971059

Currently mdxRs does not support plugins. You can set mdxRs: false in the next.config.mjs if you want to use the plugins.

Also if you set mdxRs: false you should install @mdx-js/loader. Otherwise nextjs server(both development and production) won't start.

[pokuwagata]

Thanks. If so, this official code example is wrong ? https://beta.nextjs.org/docs/guides/mdx#remark-and-rehype-plugins

import addMdx from '@next/mdx';

addMdx(nextConfig, {
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  }
})

export default {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'mdx'],
  experimental: {
    appDir: true,
    mdxRs: true, 
  }
}

[kirill-konshin]

@pokuwagata is right, docs need to be fixed. Additionally, docs don't mention that @mdx-js/loader has to be installed manually, without it next dev silently fails.

[pokuwagata]

I tried mdxRs: false and install @mdx-js/loader but It seems that rehypePlugins is not work in @next/mdx.

const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
  experimental: {
    appDir: true,
    mdxRs: false,
  },
};

const withMDX = addMdx({
  options: {
    remarkPlugins: [],
    rehypePlugins: [
      () => {
        console.log("⭐"); // not logged 
      },
      rehypeHighlight, // not worked
    ],
  },
});

export default withMDX(nextConfig);

[s-kennedy]

I'm having the same issue, I'm trying to use remark-gfm and it's not working on next@13.2.1. This is my next.config.mjs:

import mdx from '@next/mdx'
import remarkGfm from 'remark-gfm'

const withMDX = mdx({
  options: {
    remarkPlugins: [remarkGfm]
  }
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  experimental: {
    mdxRs: false
  }
}

export default withMDX(nextConfig)

[paulwongx]

+1 on this

[Railly]

In last version (13.4.0) is working as expected

// next.config.mjs
import rehypePrettyCode from "rehype-pretty-code";
import remarkGfm from "remark-gfm";
import withMDX from "@next/mdx";
import { rehypePrettyCodeOptions, rehypePrettyCodeClasses } from "./lib/rehype.mjs";

const mdxConfig = {
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      [rehypePrettyCode, rehypePrettyCodeOptions],
      [rehypePrettyCodeClasses],
    ],
  },
};

const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  reactStrictMode: true,
  images: {
    domains: ["api.producthunt.com", "img.shields.io"],
  },
  experimental: {
    appDir: true,
    mdxRs: false,
  },
};

export default withMDX(mdxConfig)(nextConfig);

[pokuwagata]

I think not only version 13.4.0 but also 13.2.2 works as expected.

FYI Although document doesn't say, next-mdx-remote also works with remark/rehype plugins.

 <MDXRemote
  source={content}
  components={components}
  options={{
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [rehypeHighlight],
    },
  }}
/>

[timneutkens]

The docs have been updated to no longer show the plugins and mdxRs flag in the same code sample. Thanks for the report!

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.