Webpack集成pug-loader编译失败，报错options must be an object

核心报错 #

TypeError: options must be an object at Function.validateOptions (pug-loader/index.js:67:11)

完整报错信息 #

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

当前Webpack配置 #

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)/,
            },
        ]
    },
}

解决方案 #

这个错误是因为pug-loader v3+版本要求必须传入options对象，哪怕是空对象也可以。当前配置里直接写loader: 'pug-loader'没有指定options，导致校验失败。

方案1：修改Webpack配置 #

给pug-loader的rules加上空的options对象：

{
    test: /\.pug$/,
    loader: 'pug-loader',
    exclude: /(node_modules|bower_components)/,
    options: {} // 新增空options对象
},

方案2：降级pug-loader版本 #

如果不想修改配置，可以降级到不需要强制传options的pug-loader v2.x版本，执行命令：

npm install pug-loader@2 --save-dev

内容的提问来源于stack exchange，提问作者ToyTrexx