Error: Compiling RuleSet failed: Properties options are unknown

Viewed 1384

Having upgraded from webpack 4.46.0 to 5.45.1 I am encountering the following error during the build:

Error: Compiling RuleSet failed: Properties options are unknown (at ruleSet[1].rules[6]: [object Object])

Can someone clarify what exactly this error means? I can't work it out as it is so unsemantic. Do I need to set options? If so which?

It seems to point towards the settings in module.rules, but the 6th entry is just an array of loaders and has no options.

Previously these were loaded using the loaders property.

      module: {
        rules: [
          ...5 other entries...,
          {
            test: /\/custom-file.js$/,
            use: [
              'cache-loader',
              path.resolve(__dirname, '../build/package/custom-webpack-loader.js'),
            ],
          },
        ],
      },
1 Answers

enter image description here Actually, you should look into the entry below this one, that is to say the 7th entry in reality.

In my case, I replaced type: "url-loader" with type: "asset/resource" without removing url-loader option, thus webpack complained about it. Since loading image&font is a breaking change in webpack-v5, I suppose perhaps its a common pitfall in most similiar upgrading cases.

--------More in detail:

I recreated my flawed config and tracked down the error emitted by webpack.

Error: Compiling RuleSet failed: Properties options are unknown (at ruleSet[1].rules[4]: [object Object]) at RuleSetCompiler.error (/Users/dearvikki/workspace/yapi/vendors/node_modules/webpack/lib/rules/RuleSetCompiler.js:381:10) at RuleSetCompiler.compileRule (/Users/dearvikki/workspace/yapi/vendors/node_modules/webpack/lib/rules/RuleSetCompiler.js:204:15) at /Users/dearvikki/workspace/yapi/vendors/node_modules/webpack/lib/rules/RuleSetCompiler.js:160:16 at Array.map () ...

It turns out that webpack will apply user-defined configs with extra default options, including an unshifted default ruleset, thats why the index of our ruleset become [1].

Calling backtrack:

rules/RuleSetCompiler.js#L68

compile(ruleSet) {
    const rules = this.compileRules("ruleSet", ruleSet, refs);
}

NormalModuleFactory.js#L239

this.ruleSet = ruleSetCompiler.compile([
    {
        rules: options.defaultRules // default rules come first
    },
    {
        rules: options.rules // our rules
    }
]);

config/normalization.js#L242

const getNormalizedWebpackOptions = config => {
    ...
    module: nestedConfig(config.module, module => ({
        ...
        defaultRules: optionalNestedArray(module.defaultRules, r => [...r]),
    })
}

webpack.js#L77

const createCompiler = rawOptions => {
    const options = getNormalizedWebpackOptions(rawOptions);
    ...
    applyWebpackOptionsDefaults(options);
}

config/defaults.js#L518

// make default rules
A(module, "defaultRules", () => {
    return rules;
})
Related