Not working with @next/mdx

[m5p3nc3r]

I configure the plugin like this:

import nextMDX from "@next/mdx";
import remarkSVGBob from "remark-svgbob";

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkSVGBob],
    rehypePlugins: [],
  },
});

const nextConfig = {
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};

export default withMDX(nextConfig);

With this configuration, I can see that the svgbob code block is being detected in my markdown, and that the ASCII is being converted into what looks like a sensible SVG block.

But if I am processing any pages with svgbob content, I get the following error

 ⨯ ./src/app/page.mdx
Error: page.mdx:Error: Cannot handle unknown node `raw`
Import trace for requested module:
./src/app/page.mdx

Is there something else that needs to be done to this plugin to make it compatible with the next/mdx framework?

[m5p3nc3r]

Hey - I have spent a bit more time looking into this. I can fix some of the issue by adding the rehype-raw plugin, but this causes me some additional issues. The compiler gives this error:

Error: page.mdx:Error: Cannot compile mdxjsEsm node. It looks like you are using MDX nodes with hast-util-raw (or rehype-raw). If you use this because you are using remark or rehype plugins that inject 'html' nodes, then please raise an issue with that plugin, as its a bad and slow idea. If you use this because you are using markdown syntax, then you have to configure this utility (or plugin) to pass through these nodes (see passThrough in docs), but you can also migrate to use the MDX syntax.

Any pointers on how to move forward with this would be appreciated.