Compatibility Issues with latest rehype-pretty-code and MDX

[mardausdennis]

Issue with MDX and Rehype Integration in Next.js Project

Description

I'm experiencing an issue with the integration of MDX and the newest Rehype versions in the project, specifically involving rehype-pretty-code. Despite following the standard integration procedures, I'm encountering errors that prevent my MDX files from being processed correctly.

Steps to Reproduce

1. Set up a Taxonomy project.
2. Integrate rehype-pretty-code@latest along with other related Rehype plugins.
3. Attempt to process MDX files.

The issue arises when using Rehype syntax highlighting, especially with lines like js title="tailwind.config.js" {6} in the components.mdx file. In code-blocks.mdx, similar usage triggers the error.

Expected Behavior

I expected the MDX files to be processed correctly with Rehype plugins, ensuring proper rendering of components, code blocks, and other MDX features.

Actual Behavior

The MDX files are not being processed correctly, leading to errors such as:

• TypeError: Cannot read properties of undefined (reading 'push')
• Issues with understanding certain syntax in MDX files.

These errors suggest a potential compatibility issue between the latest versions of these packages and the MDX/Rehype setup in the project.

What I've Tried

I have followed the documentation from rehype-pretty-code and also referred to the example repo here. Despite this, the issue persists. Here's my current configuration:

next.config.mjs

import nextMDX from '@next/mdx';
import rehypePrettyCode from 'rehype-pretty-code';

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  cleanDistDir: true,
  reactStrictMode: true,
  images: {
    domains: ['avatars.githubusercontent.com'],
  },
  experimental: {
    mdxRs: false, 
  },
};

plugins.push(
  nextMDX({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [],
      rehypePlugins: [[rehypePrettyCode, options]],
    },
  })
);

export default () => plugins.reduce((_, plugin) => plugin(_), nextConfig);

• contentlayer.config.js is like the original form from the taxonomy project. (source)

Additional Context

• The issue particularly arises in two MDX files: components.mdx and code-blocks.mdx.
• In components.mdx, the error seems to be triggered by lines where Rehype highlighting syntax is used, specifically in code blocks. For example, the line js title="tailwind.config.js" {6} causes issues.
• Similarly, in code-blocks.mdx, the Rehype highlighting syntax seems to be at the root of the problem.
• This suggests that the problem may be related to the way rehype-pretty-code handles specific syntax or components in these MDX files.
• The errors do not occur in other MDX files where such syntax or components are not used.

Environment

• Node.js version: 18.18.2
• NPM version: 10.2.1
• Next.js version: 13.5.6

Packages and versions affected:

• rehype: ^13.0.1
• rehype-autolink-headings: ^7.1.0
• rehype-pretty-code: ^0.10.2
• rehype-slug: ^6.0.0

Potential Causes/Suggestions

I suspect this might be related to the recent updates to the Rehype ecosystem or a specific incompatibility with the latest version of rehype-pretty-code. Downgrading the packages to earlier versions seems to mitigate the issue, indicating a potential regression or breaking change in the newer versions.

Request for Help

I am looking for guidance or suggestions on resolving this issue. If anyone has experienced similar problems or knows how to address this, your help would be greatly appreciated to get the latest versions running on the Taxonomy project.