Pug > 3, pug-loader error.

[n4nirmal09]

---

ERROR in Error: Child compilation failed: Module build failed (from ../node_modules/pug-loader/index.js): TypeError: options must be an object

Works fine with: "pug": "^2.0.4", "pug-loader": "^2.4.0",

[kumardeepakme]

You can try pug3-loader

[n4nirmal09]

Hey Kumar, Working like a charm.

Thanks

[luisfalconmx]

I am having the same problem trying to configure webpack with pug. With the pug-loader it doesn't work but with pug3-loader it works fine.

pug: "^3.0.2"
pug-loader: "^1.0.2"
pug3-loader: "^2.4.3"
html-webpack-plugin: "^5.3.1"
webpack: "^5.24.4",
webpack-cli: "^4.5.0"

I give details of my configuration with webpack.

My webpack file:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  resolve: {
    extensions: [".js"],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.pug$/,
        use: {
          loader: "pug-loader",
          options: {
            pretty: true,
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/pages/home.pug",
    }),
  ],
};

With the pug3-loader it would look like this and it works.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  resolve: {
    extensions: [".js"],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.pug$/,
        use: {
          loader: "pug3-loader",
          options: {
            pretty: true,
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/pages/home.pug",
    }),
  ],
};