Registry / web-framework / vite-plugin-react-mdoc

vite-plugin-react-mdoc

library0.0.0-dev.10jsnpmunverified

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.

web-framework

npm install vite-plugin-react-mdoc

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REACT-

vite-plugin-react-mdoc

web-frameworkjavascriptv0.0.0-dev.10

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import mdoc from 'vite-plugin-react-mdoc'

✗ const mdoc = require('vite-plugin-react-mdoc')

ESM-only; CommonJS require will fail because the package has no CJS export.

MdContent

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

✗ import MdContent from './doc.md'

MdContent is a named export, not default.

MdDemos

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

✗ 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.

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;

Debug

Known issues

deprecatedThe 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.

affects: >=0.0.0-dev.0

breakingCommonJS require() will throw: ERR_REQUIRE_ESM

fix

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

affects: >=0.0.0-dev.0

gotchaTypeScript projects need a declaration file for .md imports; otherwise errors on import.

fix

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

affects: >=0.0.0-dev.0

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

fix

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

affects: >=0.0.0-dev.0

Errors

Common errors & fixes

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

Package not installed.

fix

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

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

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

fix

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

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

Missing module declaration for .md files.

fix

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

Error: React is not defined

Missing React import in the component that uses MdContent.

fix

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

Upgrade

Version history

0.0.0-dev.10latest on npm

Audit

Dependencies

viterequiredRequired as peer dependency; the plugin only works with Vite.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-react-mdoc ↗