Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugins not working properly when using compileMdx #431

Closed
billgun opened this issue Feb 4, 2024 · 8 comments
Closed

Plugins not working properly when using compileMdx #431

billgun opened this issue Feb 4, 2024 · 8 comments

Comments

@billgun
Copy link

billgun commented Feb 4, 2024

As the title says, or i might be missing something but i cant find anywhere in the docs

As the title says

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

My mdx is not rendering properly with plugins used.
image-9.png

@billgun
Copy link
Author

billgun commented Feb 5, 2024

Anothere reference i have tried as well url

@turtle601
Copy link

I have a same problem too

@talatkuyuk
Copy link

Can you share a minimum complete app in order to understand problem ?
What is your mdx content? what is your main rendered component? etc...

@billgun
Copy link
Author

billgun commented Feb 7, 2024

Apparently my markdown is wrong because I just copied it, I am sorry :/
The markdown for the table is all in one line, but when I fixed it I ran into another error.
image
But this can be fixed by downgrading remark-gfm to ^3.0.0 instead of ^4.0.0
I am not sure if this is next-mdx-remote issues or remark-gfm? url

@talatkuyuk
Copy link

talatkuyuk commented Feb 7, 2024

The issue is related with next-mdx-remote not remark-gfm. The remark-gfm ^3.0.0 and ^4.0.0 uses different version of unified. And current next-mdx-remoteis not inline with latest version the remark-gfm ^4.0.0, sadly.

@firmart
Copy link

firmart commented Feb 10, 2024

@talatkuyuk Thanks. I downgraded remark-gfm to 3.0.1. Works fine.

@karlhorky
Copy link

karlhorky commented Apr 6, 2024

I can confirm that [email protected] (canary version from the v5 PR) is compatible with [email protected] 🎉

(in my analysis, this most likely extends to any other plugins which depend on MDX v3 or newer versions of the Unified dependencies)

cc @dstaley in case you want to close this as #419 has also been closed

@dstaley
Copy link
Contributor

dstaley commented Apr 10, 2024

@karlhorky thanks for confirming!

@dstaley dstaley closed this as completed Apr 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants