pug-react-compiler

1.1.0 verified Fri May 01 auth: no javascript deprecated

A compiler that converts Pug (formerly Jade) templates into React components by parsing Pug AST into intermediate JavaScript, converting to SpiderMonkey AST via Esprima, and producing React-compatible render functions. Current stable version is 1.1.0, with low release cadence (last update 2015). Key differentiators: supports `require` hoisting for external components, handles conditionals and iteration, but lacks filters, mixins, and cases. Not intended for production use; includes a CLI tool and works with CommonJS bundlers.

Common errors

error React is not defined ↓

cause The package generates code that references React.DOM but does not automatically require React.

fix

Ensure React is available globally or require it before using compiled components.

error Cannot find module 'pug' ↓

cause Required dependency pug must be installed explicitly; the package does not bundle it.

fix

Run npm install pug --save alongside pug-react-compiler.

error TypeError: pugReact.compile is not a function ↓

cause Using default import when only named exports exist.

fix

Use named imports: import { compile } from 'pug-react-compiler'

Warnings

deprecated Package is unmaintained and relies on outdated React versions (pre-0.14). ↓

fix Migrate to a modern alternative like @emotion/styled or JSX with Babel.

gotcha Filters, mixins, and cases are NOT implemented; using them will cause errors or silent failures. ↓

fix Avoid these Pug features or process them manually before compilation.

gotcha Multiple root nodes: only the last statement is returned; previous ones are discarded. ↓

fix Wrap multiple elements in a single parent element.

gotcha Using Array.prototype.forEach in templates outputs nothing; use Pug's `each` block instead. ↓

fix Prefer pug's `each` syntax over JavaScript for loops.

gotcha Naked text nodes without a parent are auto-wrapped in a <span>. ↓

fix Wrap text nodes explicitly in a parent element to control output.

Install

npm install pug-react-compiler

yarn add pug-react-compiler

pnpm add pug-react-compiler

Imports

compileClient

wrong

var compileClient = require('pug-react-compiler').compileClient;

correct

import { compileClient } from 'pug-react-compiler'

ESM and CJS both supported; compileClient returns compiled code as a string.

compile

wrong

const pugReact = require('pug-react-compiler'); const fn = pugReact.compile('...');

correct

import { compile } from 'pug-react-compiler'

compile returns a function; no default export.

default (mocked)

wrong

const pugReact = require('pug-react-compiler');

correct

import pugReact from 'pug-react-compiler'

No default export; this import will be undefined.

Quickstart

Shows basic usage: compile Pug to a React component and to a code string.

const React = require('react');
const { compile, compileClient } = require('pug-react-compiler');

// Compile to a render function
const fn = compile('p Hello, world!');
const Component = React.createClass({ render: fn });
const markup = React.renderToStaticMarkup(React.createElement(Component));
console.log(markup);

// Compile to code string
const code = compileClient('div#root');
console.log(code);