Is there a fallback component or skip missing custom component

[Jervx]

I created a custom hook useSerializeMd that will serialize whatever string you provide it.

// useSerializeMd.tsx

import { useCallback, useEffect, useState } from "react";

import rehypePrism from "rehype-prism-plus";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemoteSerializeResult } from "next-mdx-remote";

const useSerializeMd = (markdown: string) => {
    const [mdxData, setMdxData] = useState<MDXRemoteSerializeResult<
        Record<string, unknown>,
        Record<string, unknown>
    > | null>(null);

    const parseContent = useCallback(async () => {
        try {
            const mdxContent = await serialize(markdown, {
                mdxOptions: {
                    development: process.env.NODE_ENV === "development",
                    rehypePlugins: [rehypePrism],
                },
            });

            setMdxData(mdxContent);
        } catch (e) {}
    }, [markdown]);

    useEffect(() => {
        parseContent();
    }, [markdown, parseContent]);

    return { mdxData };
};

export default useSerializeMd;

// chat-fragment.tsx

const ChatFragment = ({ message } : ...) => {
    const { mdxData } = useSerializeMd(message);
    
    return (
           <div className="flex-1 prose font-inter ml-4 space-y-4 max-w-full overflow-clip">
                    {mdxData && (
                        <MDXRemote
                            scope={{}}
                            frontmatter={{}}
                            components={...}
                            compiledSource={mdxData.compiledSource}
                        />
                    )}
            </div>
    )
}

The message contain this string 👉🏼 Hello <MyCustom>

I forgot to provide the MyCustom component to the components props of <MDXRemote components={...} />, by default it'll crash.

Error: Expected component `MyCustom` to be defined: you likely forgot to import, pass, or provide it.
It’s referenced in your code at `3:1-3:13`

I was wondering if there's a way to add an optional fallback component in case we forgot to provide it to the MDXRemote?
Or alternatively make MDXRemote skip that missing component instead of crashing?

<MDXRemote 
    // replaces incase it doesn't exist
    fallbackComponent={() => () => <p>Component not available</p> } 
    // or
    skipMissingComponent={true}
    components={{ 
             p : (props : any) => <p {...props} />,
             ...
}} />

I came across to this lightweight library called markdown-to-jsx, it also support custom component. In case the markdown contains a custom component like

# hello

<SomeComponent />

## hey

but the component was not provided to the <Markdown /> component, it does skips that missing custom component and proceed rendering the markdown without crashing the app.

By the way I am using Next.js 14.

[talatkuyuk]

Hi @Jervx , no need to add any feature into next-mdx-remote for that.

I suggest you to use a recma plugin called recma-mdx-escape-missing-components which is one of my plugins. It escapes missing components with empty, no fallback component (I consider no need a fallback).

    // ...
    import recmaMdxEscapeMissingComponents from "recma-mdx-escape-missing-components";
    // ...
    const parseContent = useCallback(async () => {
        try {
            const mdxContent = await serialize(markdown, {
                mdxOptions: {
                    development: process.env.NODE_ENV === "development",
                    rehypePlugins: [rehypePrism],
                    recmaPlugins: [recmaMdxEscapeMissingComponents],
                },
            });

            setMdxData(mdxContent);
        } catch (e) {}
    }, [markdown]);

    // ...

I wonder your feedback :)