when using rehype-sanitize I can't render my custom component

[2820402]

import { serialize } from 'next-mdx-remote/serialize';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';

const schema = {
    ...defaultSchema,
    tagNames: [
        ...defaultSchema.tagNames!,
        'Callout',
    ],
    attributes: {
        ...defaultSchema.attributes,
        Callout: ['*'],
    },
};

const source = "<Callout emoji='💡'>Testing</Callout>"

const mdxSource = await serialize(source, {
        mdxOptions: {
            remarkPlugins: [remarkGfm],
            rehypePlugins: [
                [
                    rehypeSanitize,
                    {
                        schema: schema,
                    },
                ],
            ],
            format: 'mdx',
        },
    });

console.log(mdxSource) // empty don't have Callout component

Is there is a way to render that component while using rehype-sanitize

the version I use is

"rehype-sanitize": "^6.0.0",
"next-mdx-remote": "^5.0.0",

[wooorm]

Yes. Because they are not safe. MDX is unsafe. You cannot use rehype-sanitize with MDX.

[2820402]

Is there any way to sanitize input with other library which works with mdx

[wooorm]

no — the question is wrong. MDX is not safe