CODEWITHSUNDEEP
github-flavored-markdownnext.js14taurimdxjsremarkjs
Bismuth83
Bismuth83

Reputation: 31

Not able to use remark plugins with next/mdx

I've been trying to implement a blog-like system in an application I am making with Tauri and Next.js using the MDX support that Next.js has. As I was writing content for one of the markdown pages, I realized that there were several plugins I would like to use, such as remark-gfm.

However, despite following the instructions provided by the Next.js docs, I cannot find a way to add remark-gfm. I have tried the following, and all solutions I find online only give code in this format, or using nextMdx, which also does not work for me:

import createMDX from '@next/mdx'

import remarkGfm from 'remark-gfm'
// import rehypeKatex from 'rehype-katex'
// import rehypeStringify from 'rehype-stringify'
// import remarkMath from 'remark-math'
// import remarkParse from 'remark-parse'
// import remarkRehype from 'remark-rehype'
// import remarkMdx from 'remark-mdx'

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
})

/**
 * rehypeStringify, rehypeKatex
 * , remarkMath, remarkRehype, remarkParse, remarkMdx
 */

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  experimental: {
    mdxRs: true,
  },
};

export default withMDX(nextConfig);

Here are my package.json dependencies and mdx-components.tsx:

package.json dependencies:

"dependencies": {
    "@dnd-kit/core": "^6.1.0",
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-brands-svg-icons": "^6.5.2",
    "@fortawesome/free-regular-svg-icons": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@mdx-js/loader": "^3.0.1",
    "@mdx-js/react": "^3.0.1",
    "@next/mdx": "^14.2.3",
    "@nextui-org/react": "^2.4.0",
    "@tailwindcss/typography": "^0.5.13",
    "@tauri-apps/api": "^1.5.3",
    "@types/mdx": "^2.0.13",
    "next": "^14.2.3",
    "nodemon": "^3.1.0",
    "react": "^18",
    "react-dom": "^18",
    "rehype-katex": "^7.0.0",
    "rehype-stringify": "^10.0.0",
    "remark": "^15.0.1",
    "remark-gfm": "^4.0.0",
    "remark-html": "^16.0.1",
    "remark-math": "^6.0.0",
    "remark-mdx": "^3.0.1",
    "remark-parse": "^11.0.0",
    "remark-rehype": "^11.1.0",
    "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
    "uuid": "^9.0.1"
  },

mdx-components.tsx:

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

Is it possible there is some conflict with Tauri? From my understanding of Tauri, the frontend and backend should be independent (just connected via the Tauri API), so this conflict shouldn't occur.

Upvotes: 3

Views: 395

Answers (1)

Remco Haszing
Remco Haszing

Reputation: 7829

MDX maintainer here

The Rust implementation of MDX does not support plugins. You need to remove the Next config option experimental.mdxRs.

As a side note, the useMDXComponents function does not take any arguments. The Next.js documentation on this is wrong. I suggest you remove its argument.

You also don’t need the @mdx-js/react and remark-mdx dependencies.

Upvotes: 0

Related Questions