Webpack css loader error when running npm start

Question

When i run npm start on my project i get an error that says:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

• configuration has an unknown property 'modules'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? } -> Options object as provided by the user. For typos: please correct them. For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { modules: … } }) ]

I´ve updated webpack (v5) and followed the instructions of webpack v5 doc on css loaders ( https://webpack.js.org/api/loaders/#thisgetoptionsschema ) and my webpack.config.js looks like this:

webpack.config.js

const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    },
    modules: {
        rules: [
            { 
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],            
            },
        ],
    },
};

index.js

import {run} from "./app/app";
import "./main.css";
import { AlertService } from "./app/alert.service";
import { ComponentService } from "./app/component.service";
const alertService = new AlertService();
const componentService = new ComponentService();
run(alertService, componentService);

main.css

body{
    background-color: purple;
}

devDependencies

 "devDependencies": {
    "css-loader": "^6.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.61.0",
    "webpack-cli": "^4.9.1"
  }

Can someone please help me out.

Answer 1

Everything looks fine except one object key. According to webpack configuration , your loaders shall be inside rules array, which is key of the module object.

In your configuration file, you have modules instead of module . Please change that and let me know if it works :)

Correct config

 const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\\.css$/i, use: ["style-loader", "css-loader"], }, ], }, };