{"id":26122,"library":"pug-react-compiler","title":"pug-react-compiler","description":"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.","status":"deprecated","version":"1.1.0","language":"javascript","source_language":"en","source_url":"git://github.com/erikwoo/pug-react-compiler","tags":["javascript"],"install":[{"cmd":"npm install pug-react-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add pug-react-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add pug-react-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Parses Pug input into AST for compilation","package":"pug","optional":false},{"reason":"Parses intermediate JavaScript into SpiderMonkey AST","package":"esprima","optional":false},{"reason":"Transforms and minifies the generated AST","package":"uglify-js","optional":false},{"reason":"Provides React.DOM and render methods for component generation","package":"react","optional":true}],"imports":[{"note":"ESM and CJS both supported; compileClient returns compiled code as a string.","wrong":"var compileClient = require('pug-react-compiler').compileClient;","symbol":"compileClient","correct":"import { compileClient } from 'pug-react-compiler'"},{"note":"compile returns a function; no default export.","wrong":"const pugReact = require('pug-react-compiler'); const fn = pugReact.compile('...');","symbol":"compile","correct":"import { compile } from 'pug-react-compiler'"},{"note":"No default export; this import will be undefined.","wrong":"const pugReact = require('pug-react-compiler');","symbol":"default (mocked)","correct":"import pugReact from 'pug-react-compiler'"}],"quickstart":{"code":"const React = require('react');\nconst { compile, compileClient } = require('pug-react-compiler');\n\n// Compile to a render function\nconst fn = compile('p Hello, world!');\nconst Component = React.createClass({ render: fn });\nconst markup = React.renderToStaticMarkup(React.createElement(Component));\nconsole.log(markup);\n\n// Compile to code string\nconst code = compileClient('div#root');\nconsole.log(code);","lang":"javascript","description":"Shows basic usage: compile Pug to a React component and to a code string."},"warnings":[{"fix":"Migrate to a modern alternative like @emotion/styled or JSX with Babel.","message":"Package is unmaintained and relies on outdated React versions (pre-0.14).","severity":"deprecated","affected_versions":"<1.2"},{"fix":"Avoid these Pug features or process them manually before compilation.","message":"Filters, mixins, and cases are NOT implemented; using them will cause errors or silent failures.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Wrap multiple elements in a single parent element.","message":"Multiple root nodes: only the last statement is returned; previous ones are discarded.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Prefer pug's `each` syntax over JavaScript for loops.","message":"Using Array.prototype.forEach in templates outputs nothing; use Pug's `each` block instead.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Wrap text nodes explicitly in a parent element to control output.","message":"Naked text nodes without a parent are auto-wrapped in a <span>.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure React is available globally or require it before using compiled components.","cause":"The package generates code that references React.DOM but does not automatically require React.","error":"React is not defined"},{"fix":"Run npm install pug --save alongside pug-react-compiler.","cause":"Required dependency pug must be installed explicitly; the package does not bundle it.","error":"Cannot find module 'pug'"},{"fix":"Use named imports: import { compile } from 'pug-react-compiler'","cause":"Using default import when only named exports exist.","error":"TypeError: pugReact.compile is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}