Directives fails but work with "@next/mdx"

[hsjobeki]

Some remark / rehype plugins fail unexpectedly with next-mdx-remote, while they dont fail with nextMDX

In my concrete example "remark-directive" works with nextMDX but fails with next-mdx-remote

Also reading the troubleshooting page didn't help any further: https://mdxjs.com/docs/troubleshooting-mdx/

Works ✔️

<!-- Test.md -->
:::note{.warn}
stuff
:::

Trying to compile it with next-mdx-remote 🟥

const src = `
:::note{.warn}
stuff
:::
`;

const MDX = () => (
 <MDXRemote
   options={{
     mdxOptions: {
       remarkPlugins: [remarkDirective],
     },
   }}
   source={src}
 />
);

Produces the following error message.

More information: https://mdxjs.com/docs/troubleshooting-mdx]
 ⨯ [Error: [next-mdx-remote] error compiling MDX:
Cannot set properties of undefined (setting 'directiveAttributes')

More information: https://mdxjs.com/docs/troubleshooting-mdx] {
  digest: '3365904784'
}

While compiling the same source with mdx from @next/mdx is just fine.

// next.config.mjs
import mdx from "@next/mdx";
import remarkDirective from "remark-directive";

const withMDX = mdx({
  options: {
    remarkPlugins: [remarkDirective],
  },
});

export default withMDX({});

I dont understand whats the difference here. I would be very pleased if somebody helped me figure this out. 🙏

[talatkuyuk]

The next-mdx-remote uses the @mdx-js/mdx version 2, but @next/mdx uses version 3, which both depends on different version of unified.

So, for now, remark-directive@2 is compatible with the next-mdx-remote, remark-directive@3 is compatible with the @next/mdx

With this regard you should employ [email protected] for the next-mdx-remote, I suppose.

[hsjobeki]

The next-mdx-remote uses the @mdx-js/mdx version 2, but @next/mdx uses version 3, which both depends on different version > of unified.

Thanks i didn't know where the difference came from.
I guess this will be fixed by #425

[talatkuyuk]

Hi @hsjobeki, next-mdx-remote v5 is now compatible with MDX ver.3. Can you check the issue again, and close it, if it is resolved.