`details` custom component (rsc)

[abernier]

Describe the bug

import { compileMDX } from "next-mdx-remote/rsc";

export default async function Page() {
  const source = `# Hello

<details>
  <summary>detail A</summary>

Just a detail

</details>`;

  const { content } = await compileMDX({
    source,
    components: {
      details(props) {
        return <details className="border-2 border-green-500" {...props} />;
      },
    },
  });

  return <main>{content}</main>;
}

=> rendered html does not have the border-2 border-green-500 class: despite the details() component

Reproduction

https://github.com/abernier/bug-next-mdx-remote-471

https://stackblitz.com/~/github.com/abernier/bug-next-mdx-remote-471?file=app/page.tsx

next-mdx-remote version

v5.0.0

[abernier]

just added reproduction (github + stackblitz live demo)

[abernier]

also tested for img:

import { compileMDX } from "next-mdx-remote/rsc";

export default async function Home() {
  const source = `# Hello

✅ It works for
---

![](https://placekitten.com/200/300)

❌ But not for
---

<img src="https://placekitten.com/200/300" alt="kitten" />

`;

  const { content } = await compileMDX({
    source,
    components: {
      img(props) {
        return (
          <img {...props} className="border-2 border-red-500" />
        );
      },
    },
  });

  return <main>{content}</main>;
}

[talatkuyuk]

It is a known behavior. The behavior is related with @mdx-js/mdx not next-mdx-remote.

All html tags (details, img etc.) you provided in a mdx are processed as html nodes. The component map is matched with only nodes derived from parsed markdown syntax other than html and jsx nodes.

[abernier]

thank you