error compiling MDX

[j-sup]

packages:

• next 13.4.3
• next-mdx-remote 4.4.1
• remark-prism 1.3.6

next.js config:

const nextConfig = { 
  experimental: {
    appDir: true,
    mdxRs: true,
  },
const withMDX = require("@next/mdx")({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});
module.exports = withMDX(nextConfig);

page:

  <MDXRemote
     source={finalContent}
     options={{
     mdxOptions: {remarkPlugins: [require("remark-prism")]}}} 
  />

when I try to access the page in dev, I get this error:

- error {
  name: 'Error',
  source: 'server',
  message: '[next-mdx-remote] error compiling MDX:\n' +
    "ENOENT: no such file or directory, open '(sc_server)/./node_modules/prismjs/prism.js'\n" +
    '\n' +
    'More information: https://mdxjs.com/docs/troubleshooting-mdx',
  stack: ''
}

[BRKalow]

Hi there, can you provide a minimal reproduction repo or codesandbox? That'll make it much easier for us to debug and triage 🙏

[j-sup]

Hi there, can you provide a minimal reproduction repo or codesandbox? That'll make it much easier for us to debug and triage 🙏

Take a look here: https://github.com/j-sup/mdx-issue -- same error.

[tobias-tengler]

Facing the exact same issue. Reproduction can be found here: https://github.com/tobias-tengler/blog

The offending part

[j-sup]

Hey, @BRKalow, do you have thoughts?

[gorillah]

hey did you find a solution? facing the same problem right now

[Vikram0118]

Can we spend some time on this issue. My app was almost ready to get shipped and facing this error :(

[ahmetskilinc]

Facing the exact same issue.

[talatkuyuk]

The issue is not related with the next-mdx-remote but remark-prism itself, since it is not compatible with unified Pluggable

Type 'Prism' is not assignable to type 'Pluggable'.
  Type 'Prism' is not assignable to type 'Plugin<any[], any, any>'.
    The 'this' types of each signature are incompatible.
      Type 'Processor<undefined, undefined, undefined, undefined, undefined>' is not assignable to type 'Processor<void, void, void, void>'.
        Types of property 'use' are incompatible.
          Type '{ <Parameters_2 extends unknown[] = [], Input extends string | Node | undefined = undefined, Output = Input>(preset?: Preset | null | undefined): Processor<undefined, undefined, undefined, undefined, undefined>; <Parameters_2 extends unknown[] = [], Input extends string | ... 1 more ... | undefined = undefined, Outp...' is not assignable to type '{ <PluginParameters extends any[] = any[], Input = Node<Data>, Output = Input>(plugin: Plugin<PluginParameters, Input, Output>, ...settings: PluginParameters | [...]): UsePlugin<...>; <PluginParameters extends any[] = any[], Input = Node<...>, Output = Input>(tuple: [...] | [...]): UsePlugin<...>; (presetOrList: Pre...'.
            Types of parameters 'preset' and 'plugin' are incompatible.
              Type 'Plugin<any, any, any>' has no properties in common with type 'Preset'.ts(2322)

The error above explains that remark-prism has to be updated according to latest updates in unified and remark ecosystem.

You can test the problem with importing the type import("unified").PluggableList:

const remarkPlugins: import("unified").PluggableList = [
  require("remark-prism"),
];

[dstaley]

Closing as this appears to be an issue with remark-prism.