jade-loader

0.8.0 verified Sat Apr 25 auth: no javascript deprecated

Webpack loader for Pug (formerly Jade) templates. Stable version 0.8.0. Converts .jade files into JavaScript template functions at build time. No longer actively developed; successor is pug-loader. Requires webpack and jade peer dependency.

Common errors

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

cause Missing or misconfigured jade-loader in webpack config.

fix

Add a rule to module.rules: { test: /\.jade$/, use: 'jade-loader' }

error Cannot find module 'jade' ↓

cause jade peer dependency not installed.

fix

Run: npm install jade --save-dev (or --save)

error require is not defined ↓

cause Using jade-loader in a non-module environment (e.g., directly in browser without webpack).

fix

Ensure the template is bundled with webpack, or use the jade runtime directly.

Warnings

deprecated jade-loader is deprecated in favor of pug-loader. Jade has been renamed to Pug. ↓

fix Use pug-loader instead. Rename .jade files to .pug and update loader config.

breaking Webpack 2+ breaking change: 'loaders' array replaced with 'rules' array. ↓

fix Update config to use module.rules with 'use' property instead of module.loaders with 'loader' property.

gotcha Peer dependency jade must be installed separately. ↓

fix Run 'npm install jade jade-loader webpack --save-dev' to ensure all dependencies are present.

Install

npm install jade-loader

yarn add jade-loader

pnpm add jade-loader

Imports

default
wrong
```
require('jade-loader!./file.jade')
```
correct
```
import template from 'jade!./file.jade';
```
Use the 'jade!' prefix in require/import to run the loader. ESM or CJS both work with the same syntax.
jade
wrong
```
const jade = require('jade-loader');
```
correct
```
const jade = require('jade');
```
jade-loader is a webpack loader, not a runtime module. The jade package itself is the runtime dependency.

webpack config

wrong

module.exports = { module: { loaders: [ { test: /\.jade$/, loader: 'jade' } ] } };

correct

module.exports = { module: { rules: [ { test: /\.jade$/, use: 'jade-loader' } ] } };

In webpack 2+, use rules with 'use' property. The 'jade' loader must be spelled 'jade-loader'.

Quickstart

Shows how to configure and use jade-loader in a webpack project to import .jade templates as template functions.

// Install
// npm install jade-loader jade webpack --save-dev

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jade$/,
        use: 'jade-loader'
      }
    ]
  }
};

// app.js
const template = require('./file.jade');
const html = template({ name: 'World' });
document.body.innerHTML = html;

// file.jade
h1 Hello, #{name}!