markdown-loader

8.0.0 verified Mon Apr 27 auth: no javascript

webpack loader that converts Markdown files into HTML using the marked library. v8.0.0 (Jan 2022) requires Node >=12.22.9 and webpack ^5.0.0. Released under semantic-release with monthly downloads ~1M. Typically used together with html-loader to handle the HTML output. Alternatives include markdown-to-html-loader or custom markdown handling, but this is a simple, focused loader that directly wraps marked.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause markdown-loader not properly configured in webpack rules.

fix

Add a rule with test: /\.md$/ and use markdown-loader and html-loader.

error Error: Cannot find module 'marked' ↓

cause missing marked dependency (markdown-loader uses marked under the hood but does not install it as a dependency).

fix

npm install marked

error webpack 4 compatibility: markdown-loader v8 requires webpack 5. ↓

cause markdown-loader v8 declares webpack ^5.0.0 as peer dependency.

fix

Either use markdown-loader v7 or earlier for webpack 4, or upgrade to webpack 5.

Warnings

breaking v8.0.0: Calls to marked are now isolated; options from one rule do not affect another. May change output if multiple markdown-loader rules with different options existed before. ↓

fix Ensure each rule's options are independent. Previously shared state may have caused unexpected behavior.

deprecated v6.0.0 dropped Node v6 support; v5.2.0 deprecated for removing Node v6 support without a major version. ↓

fix Upgrade to v8.0.0 or later if using Node >=12.22.9. For older Node, stay on v5.1.0.

gotcha markdown-loader outputs HTML string, not a module. Without html-loader, the HTML will be treated as an unexpected module export. ↓

fix Always use html-loader after markdown-loader in the loader chain.

gotcha Options object is passed directly to marked; invalid options will crash the build. ↓

fix Refer to marked documentation for valid options. Use a parse function in marked's options if advanced customization is needed.

gotcha The loader is not designed for server-side rendering or direct HTML manipulation outside webpack. ↓

fix For standalone markdown-to-HTML conversion, use marked directly instead.

Install

npm install markdown-loader

yarn add markdown-loader

pnpm add markdown-loader

Imports

default (rule use entry)
wrong
```
use: 'markdown-loader'
```
correct
```
use: [{ loader: 'html-loader' }, { loader: 'markdown-loader', options: {} }]
```
Must be chained before html-loader; using markdown-loader alone outputs raw HTML string, which webpack expects as module export.

rules config

wrong

require('markdown-loader'); // cannot be used programmatically

correct

module.exports = { module: { rules: [ { test: /\.md$/, use: [ ... ] } ] } }

markdown-loader is a webpack loader, not a standalone function. Use only inside webpack config.

options passed to marked

wrong

{ loader: 'markdown-loader', query: '?headerIds=false' }

correct

{ loader: 'markdown-loader', options: { headerIds: false } }

Options object is passed directly to marked. Do not use query string syntax.

Quickstart

Shows minimal webpack config to load .md files through markdown-loader and html-loader.

// webpack.config.js
const config = {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          { loader: 'html-loader' },
          {
            loader: 'markdown-loader',
            options: {
              // Marked options: https://marked.js.org/using_advanced#options
              headerIds: false,
              gfm: true
            }
          }
        ]
      }
    ]
  }
};
export default config;