Invalid options object error

Expected behavior

Successful HTML bundle

Actual behavior

Terminal error message - [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options has an unknown property 'module'. These properties are valid...

Steps to reproduce

• npm i -g webpack, webpack-cli, webpack-dev-server
• npm i webpack, webpack-cli, webpack-dev-server, html-loader, file-loader, extract-loader
• touch src/main.js index.html
• write out some content for the html file
• touch config/webpack.dev.js
• Place the following into webpack.dev.js

    const path = require('path')
      
    module.exports = {
      entry: {
        main: "./src/main.js",
      },
      mode: "development",
      output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/",
      },
      devServer: {
        static: "dist",
        allowedHosts: ['localhost:8080'],
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader',
                }
              ]
            },
            {
              test: /\.html$/i,
              use: [
                {
                  loader: 'file-loader',
                  options: {
                    name: '[name].html',
                  }
                },
                {
                  loader: 'extract-loader',
                },
                {
                  loader: 'html-loader',
                },
              ]
            }
          ]
        }
      },
    };

My Environment:

• Browser: Chrome
• Operating System: Windows_NT, Windows 10 Home 10.0.19044
• Node Js: 16.17.0
• NPM: 8.19.2

Dependencies

"dependencies": {
    "css-loader": "^6.7.1",
    "dotenv": "^16.0.2",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^4.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

Additional context

The error came after I installed the html-loader, file-loader and extract-loader locally. After this I updated my webpack.dev.js file (as shown)

Scripts...

"scripts": {
"start": "webpack-dev-server --config=config/webpack.dev.js",
}

Possible solution

Looking through the previous posts around this I imagine its a versioning issue, but as I'm only using node js, I'd be grateful for clarification of when webpack 5 is optimal.

CodePudding user response：

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options has an unknown property 'module'.

Move module up into the parent config as devServer.module is not valid, as the error suggests.