rehype-autolink-headings adds className to all anchor tags even without headings

[AnweshGangula]

I'm working on a Next.JS blog (referring to the following article by LeeRob - link to source code) which uses MDX-Bundler to convert MDX blog posts to HTML. I'm using the rehype-autolink-headings along with rehype-slug plugin to add clickable link on the headings of the post.

The issue is that the rehype-autolink-headings plugin is adding the className to all anchor tags, even those which are not inside heading tags. Below is the configuration i'm using:

xdmOptions(options) {
	options.rehypePlugins = [
		...(options.rehypePlugins ?? []),
		rehypeSlug,
		rehypeCodeTitles,
		rehypePrism,
		[
			rehypeAutolinkHeadings,
			{
				properties: {
					className: ['anchor']
				}
			}
		]
	];

	return options;
},

Below is the screenshot of the HTML from my blog.

[ChristianMurphy]

@AnweshGangula have your reached out to the author of the blog post?
And could you share a runnable example of the issue you are seeing? https://next.new is a quick way to generate a sandbox.

rehype-slug only visits headings https://github.com/rehypejs/rehype-slug/blob/22d2ab6d11faa250052a341e21c566705fc72e73/index.js#L22-L23
as does rehype-autolink-headings https://github.com/rehypejs/rehype-autolink-headings/blob/2a6b77f80289acd84ab85644bf185e81832b5659/lib/index.js#L80-L84

I strongly suspect the issue is coming from another plugin or something the bundler is doing, but it's hard to say without seeing the exact code you are running and the exact versions of dependencies used with it.

[AnweshGangula]

I'm having some challenges in creating the blog in Stackblitz (mdx.js is not working as exxpected), but the source is in the following GitHub repository.

[ChristianMurphy]

CodeSandbox is another alternative.
For example here is a sandbox which uses the official @mdx-js/loader (version 2 rc2), with next 12, rehype-slug, and rehype-autolink-headings. https://codesandbox.io/s/next-mdx-and-rehype-autolink-headings-6eip8?file=/next.config.mjs
Notice that the issue doesn't appear to happen with these packages alone, this strongly suggests another package is causing the issue.

[wooorm]

This is 99.99% not a problem with the plugins rehype-slug or rehype-autolink-headings.

[AnweshGangula]

I'm using MDX-Bundler which is a new package. Could that be causing this issue?
I have the source code is in the following GitHub repository.

[wooorm]

It could be many things.

Linking to a whole repo is too much, I don't have time to delve into a complete project. You can try and reduce your problem, make it as small as possible, to figure out what the problem is.

[AnweshGangula]

This project is actually very basic & built using the default Nextjs starter blog. The only custom components here are [slug].js and mdx.js.

And the index.js is just customized to list all blog posts.

I hope this helps.

[AnweshGangula]

Thank you @wooorm @ChristianMurphy.

Turns out that the issue was due to the component-substitution that I have in my [slug.js] file.
This was over-writing all the classnames and replacing them with the substitute component all anchor tags.

I'm really new to Next.js, so I was not able to reduce the problem to a specific file until now. Really Appreciate you help. 🙌🙏