MDX v2 not working

[DCsunset]

Hello,

If I install the @mdx-js/mdx package and follow the instructions in README.md, everything works well.

However, if I use the @mdx-js/mdx@next package, an error would occur:

error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module <project>/node_modules/@mdx-js/mdx/index.js from <project>/node_modules/vite-plugin-mdx/dist/imports.js not supported.
Instead change the require of index.js in <project>/node_modules/vite-plugin-mdx/dist/imports.js to a dynamic import() which is available in all CommonJS modules.
    at Object.requireMdx (<project>/node_modules/vite-plugin-mdx/dist/imports.js:10:12)
    at Object.createTransformer (<project>/node_modules/vite-plugin-mdx/dist/transform.js:16:27)
    at Object.configResolved (<project>/node_modules/vite-plugin-mdx/dist/index.js:46:43)
    at <project>/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:68353:127
    at Array.map (<anonymous>)
    at resolveConfig (<project>/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:68353:35)
    at async createServer (<project>/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66702:20)
    at async CAC.<anonymous> (<project>/node_modules/vite/dist/node/cli.js:687:24)

[silvenon]

The MDX v2 is published as ESM, vite-plugin-mdx is currently CJS, so they're not compatible. For MDX v2 I recommend using the official @mdx-js/rollup instead:

npm install @mdx-js/rollup

Next, if the ESM environment works for your project set the type in your package.json to module and load the plugin like this:

import mdx from "@mdx-js/rollup"

export default {
  plugins: [mdx()]
}

In case you need CJS see @EvHaus' solution below, #44 (comment), and if you're using React v18, see @pomber's solution, #44 (comment).

If you're using React 17 or below you'll also need to alias jsx-runtime in your Vite config:

  resolve: {
    alias: {
      "react/jsx-runtime": "react/jsx-runtime.js"
    }
  },

read here for more info.

I'm actually not sure if vite-plugin-mdx works better in any way than @mdx-js/rollup, other than offering the special transclusion syntax, so there might not be a need to make it compatible with MDX v2 at all 🤷

[DCsunset]

Thank you for your detailed explanation. It works like a charm!
I can even import @mdx-js/rollup directly since the config file is parsed as ESM after setting type to module.

[silvenon]

Yep! I was worried Vite won't work in ESM, but it does!

[EvHaus]

Just wanted to add a bit more helpful info for others who venture here. I was successful with these steps:

• Did not set type: "module" in my package.json. For me this caused a ton of other issues.
• Added the MDX plugin in my vite.config.ts like this:

import { defineConfig } from 'vite';

export default defineConfig(async () => {
  const mdx = await import('@mdx-js/rollup');

  return {
    plugins: [mdx.default()]
  };
});

• Had to set "target": "esnext" in my tsconfig.json otherwise I was getting transpilation errors

[silvenon]

Thanks for providing the code for CJS environment! I edited my comment to link to yours for people who need CJS (which is I assume most people).

[pomber]

This is the vite config that worked for me (for React 18 + MDX v2):

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

export default defineConfig(async () => {
  const mdx = await import("@mdx-js/rollup")
  return {
    optimizeDeps: {
      include: ["react/jsx-runtime"],
    },
    plugins: [react(), mdx.default({ remarkPlugins: [] })],
  }
})

From vitejs/vite#6215 (comment)

[silvenon]

@pomber thanks! I added the link to your comment in my summary comment earlier 👌

[csr632]

Notice that neither @mdx-js/rollup or @vitejs/plugin-react is doing react-refresh transform to the .mdx files (.i.e .mdx files are not self-accepting). Editing .mdx file during dev results in full reload if it not imported by a hmr boundary (.e.g imported by a .jsx file which is made self-accepting by @vitejs/plugin-react).

Here is a example of a full-reloading .mdx file (and how to workaround it):
https://stackblitz.com/edit/vitejs-vite-ucnnpy?file=vite.config.ts,src%2Fdemo.mdx,src%2Fmain.tsx,src%2FWrapper.tsx,src%2Fvite-env.d.ts&terminal=dev

Here is another way to workaround it: vitejs/vite-plugin-react#38 (comment)

[imevanc]

@silvenon @EvHaus @pomber - Has anyone a workaround to consume a package that uses mdx 1.x.x in a vite-4.x.x/mdx-2.x.x project?

[silvenon]

Open a new issue if you have a question related to this plugin, providing details and preferrably a demo repository if your situation is complex.