{"id":26598,"library":"vite-plugin-react-mdoc","title":"vite-plugin-react-mdoc","description":"A Vite plugin that allows importing Markdown files as React components, with support for frontmatter, code demos, and table of contents. Version 0.0.0-dev.10 is a development release with no stable cadence. It is inspired by dumi and provides exports like MdContent, MdDemos, frontmatter, and slugs. Compared to alternatives like vite-plugin-md or mdx, this plugin focuses on React components and demo rendering, but is still in early development and lacks production maturity.","status":"maintenance","version":"0.0.0-dev.10","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-react-mdoc","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-react-mdoc","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-react-mdoc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as peer dependency; the plugin only works with Vite.","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will fail because the package has no CJS export.","wrong":"const mdoc = require('vite-plugin-react-mdoc')","symbol":"default","correct":"import mdoc from 'vite-plugin-react-mdoc'"},{"note":"MdContent is a named export, not default.","wrong":"import MdContent from './doc.md'","symbol":"MdContent","correct":"import { MdContent } from './doc.md'"},{"note":"MdDemos is a named export, not default.","wrong":"import MdDemos from './doc.md'","symbol":"MdDemos","correct":"import { MdDemos } from './doc.md'"},{"note":"Required for TypeScript projects; save as vite.d.ts. No wrong pattern commonly seen.","wrong":null,"symbol":"type declarations for .md files","correct":"declare module '*.md' { export const MdContent, ... }"}],"quickstart":{"code":"// vite.config.js\nimport mdoc from 'vite-plugin-react-mdoc';\n\nexport default {\n  plugins: [mdoc()],\n};\n\n// App.tsx\nimport { MdContent, MdDemos } from './doc.md';\n\nfunction App() {\n  return (\n    <div>\n      <MdContent />\n      {MdDemos.map((demo, i) => (\n        <demo.Component key={i} />\n      ))}\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Shows how to configure the plugin in vite.config.js and use MdContent and MdDemos from a Markdown file in a React component."},"warnings":[{"fix":"Pin to a specific version or avoid in production.","message":"The package is in development mode (0.0.0-dev.10); API may change without notice.","severity":"deprecated","affected_versions":">=0.0.0-dev.0"},{"fix":"Use ESM imports: import mdoc from 'vite-plugin-react-mdoc'","message":"CommonJS require() will throw: ERR_REQUIRE_ESM","severity":"breaking","affected_versions":">=0.0.0-dev.0"},{"fix":"Add declare module '*.md' as shown in README.","message":"TypeScript projects need a declaration file for .md imports; otherwise errors on import.","severity":"gotcha","affected_versions":">=0.0.0-dev.0"},{"fix":"Render MdDemos as {MdDemos.map(demo => <demo.Component />)}","message":"MdDemos is an array of objects, not a single component; each has a .Component property.","severity":"gotcha","affected_versions":">=0.0.0-dev.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run: npm install vite-plugin-react-mdoc --save-dev","cause":"Package not installed.","error":"Error: Cannot find module 'vite-plugin-react-mdoc'"},{"fix":"Use: import mdoc from 'vite-plugin-react-mdoc'","cause":"Using named import incorrectly (e.g. import { mdoc }) or wrong ESM syntax.","error":"Uncaught SyntaxError: The requested module 'vite-plugin-react-mdoc' does not provide an export named 'default'"},{"fix":"Create a .d.ts file (e.g., vite.d.ts) with: declare module '*.md' { ... }","cause":"Missing module declaration for .md files.","error":"TypeScript: Cannot find module './doc.md' or its corresponding type declarations."},{"fix":"Add 'import React from 'react' at the top of the file.","cause":"Missing React import in the component that uses MdContent.","error":"Error: React is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}