{"id":20148,"library":"jade-loader","title":"jade-loader","description":"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.","status":"deprecated","version":"0.8.0","language":"javascript","source_language":"en","source_url":"git://github.com/webpack/jade-loader","tags":["javascript"],"install":[{"cmd":"npm install jade-loader","lang":"bash","label":"npm"},{"cmd":"yarn add jade-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add jade-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"compiles .jade templates into template functions","package":"jade","optional":false},{"reason":"webpack is the runtime environment for loaders","package":"webpack","optional":false}],"imports":[{"note":"Use the 'jade!' prefix in require/import to run the loader. ESM or CJS both work with the same syntax.","wrong":"require('jade-loader!./file.jade')","symbol":"default","correct":"import template from 'jade!./file.jade';"},{"note":"jade-loader is a webpack loader, not a runtime module. The jade package itself is the runtime dependency.","wrong":"const jade = require('jade-loader');","symbol":"jade","correct":"const jade = require('jade');"},{"note":"In webpack 2+, use rules with 'use' property. The 'jade' loader must be spelled 'jade-loader'.","wrong":"module.exports = { module: { loaders: [ { test: /\\.jade$/, loader: 'jade' } ] } };","symbol":"webpack config","correct":"module.exports = { module: { rules: [ { test: /\\.jade$/, use: 'jade-loader' } ] } };"}],"quickstart":{"code":"// Install\n// npm install jade-loader jade webpack --save-dev\n\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.jade$/,\n        use: 'jade-loader'\n      }\n    ]\n  }\n};\n\n// app.js\nconst template = require('./file.jade');\nconst html = template({ name: 'World' });\ndocument.body.innerHTML = html;\n\n// file.jade\nh1 Hello, #{name}!","lang":"javascript","description":"Shows how to configure and use jade-loader in a webpack project to import .jade templates as template functions."},"warnings":[{"fix":"Use pug-loader instead. Rename .jade files to .pug and update loader config.","message":"jade-loader is deprecated in favor of pug-loader. Jade has been renamed to Pug.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Update config to use module.rules with 'use' property instead of module.loaders with 'loader' property.","message":"Webpack 2+ breaking change: 'loaders' array replaced with 'rules' array.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Run 'npm install jade jade-loader webpack --save-dev' to ensure all dependencies are present.","message":"Peer dependency jade must be installed separately.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add a rule to module.rules: { test: /\\.jade$/, use: 'jade-loader' }","cause":"Missing or misconfigured jade-loader in webpack config.","error":"ERROR in ./file.jade\nModule parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run: npm install jade --save-dev (or --save)","cause":"jade peer dependency not installed.","error":"Cannot find module 'jade'"},{"fix":"Ensure the template is bundled with webpack, or use the jade runtime directly.","cause":"Using jade-loader in a non-module environment (e.g., directly in browser without webpack).","error":"require is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}