Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property

Question

PS C:\Projects\webpack_react_starter> npm run start

[email protected] start webpack serve --mode development --env development --hot --port 3000

C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\UseEffectRulePlugin.js:160 throw ruleSetCompiler.error( ^

Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[2].loader: url-loader?limit=10000&name=img/[name].[ext]) at RuleSetCompiler.error (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:373:10) at C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\UseEffectRulePlugin.js:160:29 at Hook.eval [as call] (eval at create (C:\Projects\webpack_react_starter\node_modules\tapable\lib\HookCodeFactory.js:19:10), :47:1) at RuleSetCompiler.compileRule (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:177:19) at C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9 at Array.map () at RuleSetCompiler.compileRules (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:153:16) at RuleSetCompiler.compileRule (C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:184:30) at C:\Projects\webpack_react_starter\node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9 at Array.map ()

Answer 1

Same happened to me when I upgraded to a newer webpack, the error instructs to change the config structure from query params to an options object. In my case I had to change from:

        {
            test: /\.(jpe?g|png|gif|woff|woff2|otf|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
            loader: 'url-loader?limit=1000&name=assets/img/[name].[ext]',
        }

to:

        {
            test: /\.(jpe?g|png|gif|woff|woff2|otf|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 1000,
                        name : 'assets/img/[name].[ext]'
                    }
                }
            ]
        }

same answer can be found here: https://stackoverflow.com/a/67129623/717096