Import multiple MDX files don't play well with rehype-slug

[xuanngo2001]

I'm not sure whether the issue is within rehype-slug or mdxjs.
When I imported MDX files, the same header names from different files will have the exact same ID. They are not differentiated.
e.g. I have ProdA.mdx & ProdB.mdx as followed:

// ProdA.mdx
# Product A
## Install

// ProdB.mdx
# Product B
## Install

Now, I import all products into the main page, All.mdx.

// All.mdx
import ProdA from 'ProdA.mdx'
import ProdB from 'ProdB.mdx'
<ProdA  />
<ProdB  />

On All.mdx page, I now have 2 identical IDs(#install) for product A & B. However, if I merge product A & B into 1 file, then product A has #install whereas product B has #install-1
Did I setup it up wrong? Or, there is bug in either MDX or rehype-slug.

I extended my Next.js setup to use MDX + rehype-slug.
Here is my next.config.mjs.

// next.config.mjs = ESM only
//  because most remark plugins provide ESM only packages.
//  https://ondra.nepozitek.cz/blog/nextjs-mdx-toc-5/

import createMDX from '@next/mdx';

import remarkToc from 'remark-toc';
import remarkPrism from 'remark-prism';
import remarkSectionize from 'remark-sectionize';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';


const withMDX = createMDX({
    extension: /\.mdx?$/,
    options: {
      // If you use remark-gfm, you'll need to use next.config.mjs
      // as the package is ESM only
      // https://github.com/remarkjs/remark-gfm#install
      remarkPlugins: [remarkToc, remarkSectionize, remarkPrism],
      rehypePlugins: [
                      rehypeSlug,             
                      [
                        rehypeAutolinkHeadings,
                        {
                            behaviour: 'append',
                            properties: {
                                ariaHidden: true,
                                tabIndex: -1,
                                className: 'hash-link'
                            }
                        }
                      ]
                    ],
      // If you use `MDXProvider`, uncomment the following line.
      // providerImportSource: "@mdx-js/react",
    },
  })
  
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // Configure pageExtensions to include md and mdx
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
    // Optionally, add any other Next.js config below
    reactStrictMode: true,
  }
  
// Merge MDX config with Next.js config
export default withMDX(nextConfig);

[wooorm]

This behavior you describe is not particularly a bug. Or a feature. It’s more: that’s the way things work, there is no alternative.

Plugins work on ASTs. They infer things statically. Perhaps on a server.
Importing things is a JavaScript runtime thing. They could result in anything. Dynamically. Perhaps on a client.

Take for example a heading with an expression: # {name}. Where the name variable could at runtime come from a database, local storage, whatever. It is impossible for plugins (server) to “see” what you are going to show there.