{"id":22735,"library":"vite-plugin-mdx","title":"vite-plugin-mdx","description":"Vite plugin for using MDX v1 with Vite v2. Version 3.6.1 locks peer dependencies to @mdx-js/mdx <2 and vite <3. The project is no longer actively maintained; the README recommends migrating to MDX v2 with @mdx-js/rollup for Vite v3+. Key differentiators: works with React and Preact, supports HMR and SSR, remark/rehype plugins, and pre-built transclusion of other MDX/MD files. TypeScript types are included.","status":"deprecated","version":"3.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/brillout/vite-plugin-mdx","tags":["javascript","vite","mdx","typescript"],"install":[{"cmd":"npm install vite-plugin-mdx","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-mdx","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-mdx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core MDX compiler used to transform MDX files - peer dependency","package":"@mdx-js/mdx","optional":false},{"reason":"Vite build tool - peer dependency","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CommonJS require is not supported.","wrong":"const mdx = require('vite-plugin-mdx')","symbol":"mdx (default export)","correct":"import mdx from 'vite-plugin-mdx'"},{"note":"CommonJS require is not available; use ESM import.","wrong":"const mdx = require('vite-plugin-mdx').default","symbol":"Vite Plugin Options","correct":"import type { Plugin } from 'vite'\nimport mdx from 'vite-plugin-mdx'\n// or for TypeScript: import mdx from 'vite-plugin-mdx'\n// The plugin returns a Vite Plugin instance."},{"note":"vite-plugin-mdx uses a default export only. Named exports like `mdx` are not available.","wrong":"import { mdx } from 'vite-plugin-mdx'","symbol":"(no named exports)","correct":"import mdx from 'vite-plugin-mdx'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport mdx from 'vite-plugin-mdx'\n\nconst options = {\n  remarkPlugins: [\n    // e.g. require('remark-frontmatter')\n  ],\n  rehypePlugins: [],\n}\n\nexport default defineConfig({\n  plugins: [mdx(options)]\n})\n\n// hello.mdx\n// ---\n// title: Hello\n// ---\n// import { Counter } from './Counter.jsx'\n//\n// # Hello\n//\n// This text is written in Markdown.\n//\n// MDX allows Rich React components to be used directly in Markdown: <Counter/>\n\n// Counter.jsx\nimport React, { useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n  return (\n    <button onClick={() => setCount(c => c + 1)}>\n      Counter: {count}\n    </button>\n  )\n}\n\nexport { Counter }","lang":"javascript","description":"Sets up vite-plugin-mdx with Vite and shows MDX usage with a React counter component."},"warnings":[{"fix":"Migrate to MDX v2 with @mdx-js/rollup for Vite v3+.","message":"Project is no longer actively maintained; looking for a maintainer.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"If using MDX v2 or Vite v3+, switch to @mdx-js/rollup.","message":"Peer dependencies locked to @mdx-js/mdx <2 and vite <3 in v3.6.0+.","severity":"breaking","affected_versions":">=3.6.0"},{"fix":"Use `import mdx from 'vite-plugin-mdx'`.","message":"Only defaults export is available; named imports do not work.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider using @mdx-js/vue instead.","message":"Vue support is marked as Work In Progress and may not function correctly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use @mdx-js/rollup with MDX v2.","message":"The plugin is only compatible with MDX v1; MDX v2 requires a different setup.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-mdx`.","cause":"Missing npm install of vite-plugin-mdx.","error":"Error: Cannot find module 'vite-plugin-mdx'"},{"fix":"Ensure package.json has \"type\": \"module\" or rename file to .mjs.","cause":"Using ESM in a CommonJS environment without type:module or .mjs extension.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Use `import mdx from 'vite-plugin-mdx'`.","cause":"Using a named import `{ mdx }` instead of default import.","error":"TypeError: mdx is not a function"},{"fix":"Run `npm install @mdx-js/mdx@1` (MDX v1).","cause":"Missing peer dependency @mdx-js/mdx.","error":"Error: The package `@mdx-js/mdx` is not installed"},{"fix":"Downgrade to @mdx-js/mdx@1 or migrate to @mdx-js/rollup for MDX v2.","cause":"Using MDX v2 which is not supported by vite-plugin-mdx >=3.6.0.","error":"Error: Unsupported MDX version. Required: <2."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}