Error only when deploy with Vercel: Expected component `` to be defined: you likely forgot to import, pass, or provide it.

[devchitect]

next : 14.1.0 next-mdx-remote: 4.4.1

---

I use custom components so t need to put the component in props in mdxRemote, it works perfectly in development,

the "Result:" is the custom component.

But when deploy start causing issues, and i dont know why ?!

/blog/[post].tsx

import { Frontmatter, HighlightedText, MDXOptions, H1, H2, H3, H4, H5, H6 } from '@/components/mdx'

const customComponents = {
    HighlightedText,
    h1 : H1, h2 : H2, h3 : H3,
    h4 : H4, h5 : H5, h6 : H6,
}

export const getServerSideProps = ( async (context : GetServerSidePropsContext<{post : string}>) => {

    //context : params, res, req, query, daftMode, resolveUrl 
    const { params, res } = context;

    res.setHeader(
        'Cache-Control',
        'public, s-maxage=3600, stale-while-revalidate=3600'
    )

    const { post } = params!;
    const folder =  'src/pages/blog/posts';
    const fileContent = fs.readFileSync(process.cwd() + '/' + folder + '/' + post + '.mdx', 'utf8').trim();
    const headings = extractHeadingFromExtractedMDXText(fileContent);
    const content = await serialize(fileContent, MDXOptions)

    return {
        props: { mdxSource : content, Headings: headings },
    }
})

export default function Post ({mdxSource, Headings} : Props){
return (
<div className='mx-2'>
    <MDXProvider> 
        <MDXRemote {...mdxSource} 
        components={customComponents}/>
    </MDXProvider>
</div>
)}

markdown-101.mdx

<HighlightedText content={`Result:`} />

the HighlightedText component:

export function HighlightedText(props) {

    const  { content } = props;

    return <span>{content}</span>
}

[talatkuyuk]

Can you share what the MDXOptions is ?