Theo's Typesafe Cult•10mo ago

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 https://discord.com/channels/966627436387266600/1167726380998463519

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;
  }

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}
)

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

1 Reply

OldDew•10mo ago

Hello, did you find a solution? I am having a similar problem. The way I'm doing it is by getting the markdown file content (literally reading from file):

export const getPostBySlug = (slug: string) => {
    const realSlug = slug.replace(/\.mdx$/, '')
    const filePath = path.join(rootDirectory, `${realSlug}.mdx`)

    const fileContent = fs.readFileSync(filePath, { encoding: 'utf8' })
    return fileContent
}

export const getPostBySlug = (slug: string) => {
    const realSlug = slug.replace(/\.mdx$/, '')
    const filePath = path.join(rootDirectory, `${realSlug}.mdx`)

    const fileContent = fs.readFileSync(filePath, { encoding: 'utf8' })
    return fileContent
}

Afterwards I try adding the source for the MDXRemote like this:

const Page = async ({ params } : any) => {
  const post = getPostBySlug(params.slug)

  return (
    <section className='py-24'>
      <div className='container py-4 prose'>
        <MDXRemote source={post} />
      </div>
    </section>
  )
}

const Page = async ({ params } : any) => {
  const post = getPostBySlug(params.slug)

  return (
    <section className='py-24'>
      <div className='container py-4 prose'>
        <MDXRemote source={post} />
      </div>
    </section>
  )
}

All works except plugins.

Gaming

Programming

next-mdx-remote plugins not working properly