vite-plugin-react-mdoc

0.0.0-dev.10 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'vite-plugin-react-mdoc' ↓

cause Package not installed.

fix

Run: npm install vite-plugin-react-mdoc --save-dev

error Uncaught SyntaxError: The requested module 'vite-plugin-react-mdoc' does not provide an export named 'default' ↓

cause Using named import incorrectly (e.g. import { mdoc }) or wrong ESM syntax.

fix

Use: import mdoc from 'vite-plugin-react-mdoc'

error TypeScript: Cannot find module './doc.md' or its corresponding type declarations. ↓

cause Missing module declaration for .md files.

fix

Create a .d.ts file (e.g., vite.d.ts) with: declare module '*.md' { ... }

error Error: React is not defined ↓

cause Missing React import in the component that uses MdContent.

fix

Add 'import React from 'react' at the top of the file.

Warnings

deprecated The package is in development mode (0.0.0-dev.10); API may change without notice. ↓

fix Pin to a specific version or avoid in production.

breaking CommonJS require() will throw: ERR_REQUIRE_ESM ↓

fix Use ESM imports: import mdoc from 'vite-plugin-react-mdoc'

gotcha TypeScript projects need a declaration file for .md imports; otherwise errors on import. ↓

fix Add declare module '*.md' as shown in README.

gotcha MdDemos is an array of objects, not a single component; each has a .Component property. ↓

fix Render MdDemos as {MdDemos.map(demo => <demo.Component />)}

Install

npm install vite-plugin-react-mdoc

yarn add vite-plugin-react-mdoc

pnpm add vite-plugin-react-mdoc

Imports

default
wrong
```
const mdoc = require('vite-plugin-react-mdoc')
```
correct
```
import mdoc from 'vite-plugin-react-mdoc'
```
ESM-only; CommonJS require will fail because the package has no CJS export.

MdContent

wrong

import MdContent from './doc.md'

correct

import { MdContent } from './doc.md'

MdContent is a named export, not default.

MdDemos

wrong

import MdDemos from './doc.md'

correct

import { MdDemos } from './doc.md'

MdDemos is a named export, not default.

type declarations for .md files
```
declare module '*.md' { export const MdContent, ... }
```
Required for TypeScript projects; save as vite.d.ts. No wrong pattern commonly seen.

Quickstart

Shows how to configure the plugin in vite.config.js and use MdContent and MdDemos from a Markdown file in a React component.

// vite.config.js
import mdoc from 'vite-plugin-react-mdoc';

export default {
  plugins: [mdoc()],
};

// App.tsx
import { MdContent, MdDemos } from './doc.md';

function App() {
  return (
    <div>
      <MdContent />
      {MdDemos.map((demo, i) => (
        <demo.Component key={i} />
      ))}
    </div>
  );
}

export default App;