WEBPACK Error: Child compilation failed: Module build failed (from ./node_modules/pug-loader/index.js):

Question

ERROR in Error: Child compilation failed: Module build failed (from ./node_modules/pug-loader/index.js): TypeError: options must be an object at Function.validateOptions (C:\Users\user\Desktop\WEB\webpack-template\node_modules\pug-loader\index.js:67:11)
at Object.load (C:\Users\user\Desktop\WEB\webpack-template\node_modules\pug-loader\index.js:9:8) ModuleBuildError: Module build failed (from ./node_modules/pug-loader/index.js): TypeError: options must be an object at Function.validateOptions (C:\Users\user\Desktop\WEB\webpack-template\node_modules\pug-loader\index.js:67:11)
at Object.load (C:\Users\user\Desktop\WEB\webpack-template\node_modules\pug-loader\index.js:9:8) at processResult (C:\Users\user\Desktop\WEB\webpack-template\node_modules\webpack\lib\NormalModule.js:758:19) at C:\Users\user\Desktop\WEB\webpack-template\node_modules\webpack\lib\NormalModule.js:860:5 at C:\Users\user\Desktop\WEB\webpack-template\node_modules\loader-runner\lib\LoaderRunner.js:400:11 at C:\Users\user\Desktop\WEB\webpack-template\node_modules\loader-runner\lib\LoaderRunner.js:252:18 at runSyncOrAsync (C:\Users\user\Desktop\WEB\webpack-template\node_modules\loader-runner\lib\LoaderRunner.js:156:3)
at iterateNormalLoaders (C:\Users\user\Desktop\WEB\webpack-template\node_modules\loader-runner\lib\LoaderRunner.js:251 :2) at C:\Users\user\Desktop\WEB\webpack-template\node_modules\loader-runner\lib\LoaderRunner.js:224:4 at C:\Users\user\Desktop\WEB\webpack-template\node_modules\webpack\lib\NormalModule.js:834:15 at Array.eval (eval at create (C:\Users\user\Desktop\WEB\webpack-template\node_modules\tapable\lib\HookCodeFactory.js: 33:10), :12:1) at runCallbacks (C:\Users\user\Desktop\WEB\webpack-template\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js :27:15)

• index.js:67 Function.validateOptions [webpack-template]/[pug-loader]/index.js:67:11

• index.js:9 Object.load [webpack-template]/[pug-loader]/index.js:9:8

• ModuleBuildError: Module build failed (from ./node_modules/pug-loader/index.js):

• TypeError: options must be an object

• index.js:67 Function.validateOptions [webpack-template]/[pug-loader]/index.js:67:11

• index.js:9 Object.load [webpack-template]/[pug-loader]/index.js:9:8

• NormalModule.js:758 processResult [webpack-template]/[webpack]/lib/NormalModule.js:758:19

• NormalModule.js:860 [webpack-template]/[webpack]/lib/NormalModule.js:860:5

• LoaderRunner.js:400 [webpack-template]/[loader-runner]/lib/LoaderRunner.js:400:11

• LoaderRunner.js:252 [webpack-template]/[loader-runner]/lib/LoaderRunner.js:252:18

• LoaderRunner.js:156 runSyncOrAsync [webpack-template]/[loader-runner]/lib/LoaderRunner.js:156:3

• LoaderRunner.js:251 iterateNormalLoaders [webpack-template]/[loader-runner]/lib/LoaderRunner.js:251:2

• LoaderRunner.js:224 [webpack-template]/[loader-runner]/lib/LoaderRunner.js:224:4

• NormalModule.js:834 [webpack-template]/[webpack]/lib/NormalModule.js:834:15

• CachedInputFileSystem.js:27 runCallbacks [webpack-template]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15

• child-compiler.js:169 [webpack-template]/[html-webpack-plugin]/lib/child-compiler.js:169:18

• Compiler.js:551 finalCallback [webpack-template]/[webpack]/lib/Compiler.js:551:5

• Compiler.js:577 [webpack-template]/[webpack]/lib/Compiler.js:577:11

• Compiler.js:1196 [webpack-template]/[webpack]/lib/Compiler.js:1196:17

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync] [webpack-template]/[tapable]/lib/Hook.js:18:14

• Compiler.js:1192 [webpack-template]/[webpack]/lib/Compiler.js:1192:33

• Compilation.js:2787 finalCallback [webpack-template]/[webpack]/lib/Compilation.js:2787:11

• Compilation.js:3092 [webpack-template]/[webpack]/lib/Compilation.js:3092:11

Hi all, i learn webpack and i need connect pug-loader. But in installation time in terminal writte message about pug-load(i used pug-loader), i didn't pay attention to it and continued on. As a result, the assembly fails to compile

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

let mode = 'development'
if (process.env.NODE_ENV === 'production') {
    mode = 'production'
}

console.log(mode + ' mode')

module.exports = {
    mode: mode,
    output: {
        assetModuleFilename: "assets/[hash][ext][query]",
        clean: true,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new HtmlWebpackPlugin({
        template: "./src/index.pug"
    })],
    module: {
        rules: [ {
            test: /\.html$/i,
            loader: "html-loader",
        },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    (mode === 'development') ? "style-loader" : MiniCssExtractPlugin.loader,
                    "css-loader",
                    {loader: "postcss-loader"},
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                exclude: /(node_modules|bower_components)/,
            },
        ]
    },
}

Answer 1

The pug-loader is not maintained over 5 years. Instead of the combo (html-webpack-plugin, mini-css-extract-plugin, pug-loader, html-loader) you can simplify Webpack config using the modern pug-plugin.

There is the working example for your use case.

./src/index.pug

html
  head
    //- load source styles here
    link(href=require('./style.scss') rel='stylesheet')
    //- load source scripts here and/or in body
    script(src=require('./main.js') defer='defer')
  body
    h1 Hello World!

The generated HTML:

<html>
  <head>
    <link href="css/style.f57966f4.css" rel="stylesheet">
    <script src="js/main.b855d8f4.js" defer="defer"></script>
  </head>
  <body>
    <h1>Hello Pug!</h1>
  </body>
</html>

Webpack config

const path = require('path');
const PugPlugin = require('pug-plugin');

const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';

module.exports = {
  mode,

  output: {
    path: path.join(__dirname, 'dist/'),
    assetModuleFilename: "assets/[hash][ext][query]",
    clean: true,
  },

  entry: {
    // define Pug files here
    index: './src/index.pug', // => dist/index.html
  },

  plugins: [
    new PugPlugin({
      js: {
        filename: 'js/[name].[contenthash:8].js', // output filename of JS
      },
      css: {
        filename: 'css/[name].[contenthash:8].css', // output filename of CSS
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: ['css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

The Pug plugin automatically extract CSS and JS from source files specified directly in the Pug template.