{"id":20483,"library":"pug-html-loader","title":"pug-html-loader","description":"Webpack loader that compiles Pug (formerly Jade) templates into HTML strings. Version 1.1.7 is the latest stable release. It connects Pug's compile function to Webpack's module system, outputting raw HTML that can be further processed by loaders like html-loader or raw-loader. Commonly used in webpack configurations to convert .pug files into plain HTML for bundling. Limited maintenance and lacks TypeScript support.","status":"maintenance","version":"1.1.7","language":"javascript","source_language":"en","source_url":"https://github.com/willyelm/pug-html-loader","tags":["javascript","html","pug","loader","webpack","compile","plain"],"install":[{"cmd":"npm install pug-html-loader","lang":"bash","label":"npm"},{"cmd":"yarn add pug-html-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add pug-html-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for compiling Pug templates","package":"pug","optional":false}],"imports":[{"note":"Loader is typically used in webpack config, not imported directly in source code.","wrong":"const pugHtmlLoader = require('pug-html-loader')","symbol":"default","correct":"import html from 'pug-html-loader'"},{"note":"Loader is meant to be used in a chain; raw-loader or html-loader is often required to handle the output.","wrong":"{\n  test: /\\.pug$/,\n  use: 'pug-html-loader'\n}","symbol":"pug-html-loader (as loader string)","correct":"{\n  test: /\\.pug$/,\n  use: ['raw-loader', 'pug-html-loader']\n}"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: './src/index.js',\n  module: {\n    rules: [\n      {\n        test: /\\.pug$/,\n        use: [\n          'raw-loader',\n          'pug-html-loader'\n        ],\n        options: {\n          data: {} // optional data to pass to pug render\n        }\n      }\n    ]\n  },\n  output: {\n    filename: 'bundle.js'\n  }\n};","lang":"javascript","description":"Webpack configuration using pug-html-loader to compile .pug files to HTML strings."},"warnings":[{"fix":"Change `loaders: [...]` to `use: [...]` in webpack config.","message":"Webpack 4+ requires `use` array instead of `loader` property.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Migrate to `pug-loader` (https://github.com/pugjs/pug-loader) for better support.","message":"Package may not be actively maintained; consider alternatives like `pug-loader`.","severity":"deprecated","affected_versions":"all"},{"fix":"Use `raw-loader` first to ensure the output is treated as a string, not JavaScript.","message":"Loader returns a JavaScript string; nesting with other loaders requires careful chaining.","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":"Ensure `.pug` files are processed by pug-html-loader in webpack config.","cause":"Webpack tries to parse the .pug file as JavaScript without appropriate loader.","error":"Module parse failed: Unexpected token (1:0)"},{"fix":"Run `npm install pug-html-loader --save-dev`.","cause":"Loader not installed in project dependencies.","error":"Cannot find module 'pug-html-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}