next-mdx-remote plugins not working properly

As the title says, am i doing something wrong or am i missing something tried to read the docs on next-mdx-remote found nothing
And alr tried this as well
questionsnext-remote-mdx not rendering markdown table syntax
async function getDocFromParams({ params }: DocPageProps) {
  const slug = params.slug?.join('/') || 'index';
  const filePath = path.join(process.cwd(), docDir, `${slug}.mdx`);

  if (fs.existsSync(filePath)) {
    const source = fs.readFileSync(filePath, 'utf8');
    const { content, frontmatter } = await getMdx({ source });

    return {
      meta: frontmatter,
      slug,
      content,
    };
  } else {
    return null;
  }


import {compileMdx} from 'next-mdx-remote/rsc'
import remarkGfm from 'remark-gfm';

export async function getMdx({ source }: MdxProps) {
  const { content, frontmatter } = await compileMDX<any>({
    source,
    components,
    options: {
      parseFrontmatter: true,
      mdxOptions: { remarkPlugins: [remarkToc, remarkGfm], format: 'mdx' },
    },
  });
  return {
    content,
    frontmatter,
  };
}

export default async function DocPage({ params }: DocPageProps) {
  const doc = await getDocFromParams({ params });
  return (
    {doc.content}
)


My mdx is not rendering properly
image.png
Was this page helpful?