Invalid options object: options has an unknown property 'running' (webpack-cli v4.10.0)

[yvele]

Bug report

Actual Behavior

Using:

• webpack v5.90.3
• webpack-cli v4.10.0 ⚠️
• webpack-dev-server v5.0.2

I get the following error:

[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 'running'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?,
   historyApiFallback?, host?, hot?, ipc?, liveReload?, onListening?, open?, port?, proxy?,
   server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

I'm not using running at all in my config.

Expected Behavior

It should work with webpack-cli v4.10.0 as the v5 migration documentation states that:

Minimum compatible webpack-cli version is 4.7.0 but we recommend using the latest version.

Note that I'm stuck with webpack-cli v4 because of webpack/webpack-cli#3559

How Do We Reproduce?

Basic repository repro: https://github.com/yvele/webpack-dev-server-repro

options has an unknown property '_assetEmittingPreviousFiles'.

Note that upgrading webpack-cli fixes the problem:

- "webpack-cli": "4.10.0"
+ "webpack-cli": "5.1.4"

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 557.83 MB / 16.00 GB
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.94
    Edge: 122.0.2365.63
    Firefox: 122.0.1
    Safari: 17.3.1
  Packages:
    babel-loader: ~9.1.3 => 9.1.3
    copy-webpack-plugin: ~12.0.2 => 12.0.2
    fork-ts-checker-webpack-plugin: ~9.0.2 => 9.0.2
    string-replace-loader: ~3.1.0 => 3.1.0
    style-loader: ~3.3.4 => 3.3.4
    terser-webpack-plugin: ~5.3.10 => 5.3.10
    webpack: ~5.90.3 => 5.90.3
    webpack-cli: ~4.10.0 => 4.10.0
    webpack-dev-server: ~5.0.2 => 5.0.2

[alexander-akait]

You can't use "webpack-cli": "4.10.0" with webpack-dev-server v5, it is a breaking change, just a typo, we need to fix migration guide

[aryanbhatt-clvt]

I am currently updating webpack in my project.

I am using:
"webpack-cli": "5.1.4",
"webpack": "5.92.1",
"webpack-dev-middleware": "7.2.1",
"webpack-dev-server": "5.0.4",
"webpack-hot-middleware": "2.24.3"

I am getting an error:
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

• options has an unknown property '_assetEmittingPreviousFiles'.

I am not using _assetEmittingPreviousFiles anywhere in my code.

@yvele @alexander-akait

[aryanbhatt-clvt]

These are my babel versions:
"babel-cli": "6.24.1",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "8.3.0",
"babel-plugin-add-react-displayname": "0.0.5",
"babel-plugin-css-modules-transform": "1.6.2",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-transform-async-to-generator": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-2": "6.24.1",

[alexander-akait]

Check your arguments order for dev server or please update webpack-cli/webpack-dev-server to the lastest stable versions

[aryanbhatt-clvt]

webpack-dev-server.js

const webpack = require("webpack");
const webpackDevServer = require("webpack-dev-server");
const webpackConfig = require("../webpack.config.dev");
const config = require("config");
const path = require("path");

module.exports = function startWebpackDevServer() {
const port = config.get("apps.ui.port");

// Setup webpack config
const compiler = webpack(webpackConfig);

// Get infrastructure logger from the compiler
const logger = compiler.getInfrastructureLogger("webpack-dev-server");

const options = {
proxy: [
{
context: ['/**'],
target: 'http://localhost:3077',
secure: false,
changeOrigin: true,
}
],
static: {
directory: path.resolve(__dirname, "client"),
watch: true,
},
devMiddleware: {
publicPath: "/",
},
open: true,
hot: true,
host: "demo2.patientconnect.eu",
// Additional options can be added as needed
};

const server = new webpackDevServer({
...options,
onListening: function (server) {
const { address, port } = server.listeningApp.address();
logger.info(Webpack Dev Server listening on http://${address}:${port});
},
}, webpackConfig);

server.start().then(() => {
logger.info(Webpack Dev Server listening on port ${port});
}).catch((err) => {
logger.error("Error starting webpack dev server:", err);
process.exit(1); // Exit process on error
});
};

this is the code

[alexander-akait]

Please look at arguments order - https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L308

[aryanbhatt-clvt]

Thank you!