I am using webpack - v5.90.3, webpack-cli - v5.1.4, webpack-dev-server - v5.0.2

In my webpack.config.dev.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',

  devServer: {
    static: path.join(__dirname, 'public/'),
    devMiddleware: {
      publicPath: '/dist/'
    },
    port: 3000,
    hot: "only"

  },

  entry: [
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ],
  output: {

    path: paths.appBuild,

    pathinfo: true,
    filename: 'SHSADCAA/static/js/bundle.js',
    chunkFilename: 'SHSADCAA/static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    runtimeChunk: true,
  },
  resolve: {
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
      'react-native': 'react-native-web',
    },
    plugins: [
      PnpWebpackPlugin,
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },

I got this error:

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

I'm trying to migrate from v3 to v5, but I'm still stuck on this one.

I am using webpack - v5.90.3, webpack-cli - v5.1.4, webpack-dev-server - v5.0.2

In my webpack.config.dev.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',

  devServer: {
    static: path.join(__dirname, 'public/'),
    devMiddleware: {
      publicPath: '/dist/'
    },
    port: 3000,
    hot: "only"

  },

  entry: [
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ],
  output: {

    path: paths.appBuild,

    pathinfo: true,
    filename: 'SHSADCAA/static/js/bundle.js',
    chunkFilename: 'SHSADCAA/static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    runtimeChunk: true,
  },
  resolve: {
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
      'react-native': 'react-native-web',
    },
    plugins: [
      PnpWebpackPlugin,
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },

I got this error:

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

I'm trying to migrate from v3 to v5, but I'm still stuck on this one.

• javascript
• reactjs
• webpack
• webpack-dev-server

4 Answers 4

Had sample problem, there is a thread on github repository. https://github./webpack/webpack-cli/issues/2894

In my case I am having script that start app under webpack dev server. And it seems that configuration object must be passed first, and only then piler must be passed.

This didn't worked:

const webpackDevServer = new WebpackDevServer(piler, { port: 5000, open: true, liveReload: true });

This worked:

const webpackDevServer = new WebpackDevServer({ port: 5000, open: true, liveReload: true }, piler);

Your case might be different, but I was having same error with (1) approach.

I solved this issue by updating webpack-cli to the latest version. Thanks to @LuckyLuke for suggesting checking the thread on github

In my scenario I have got the same issue while I am practicing lab from course "Building Applications with React 17 and Redux". I have updated the version of few webpack related packages in package.json file.

Before:

"webpack": "^5.91.0",
"webpack-bundle-analyzer": "4.4.2",
"webpack-cli": "4.10.0",
"webpack-dev-server": "^5.0.4"

After: Updated version(s) in package.json

"webpack": "^5.91.0",
"webpack-bundle-analyzer": "4.10.2",
"webpack-cli": "5.1.4",
"webpack-dev-server": "^5.0.4"

I have faced a couple of other issues as well while practicing lab of aforementioned Course, with file: webpack.config.dev.js. Hence I am pasting the file content that is working fine so that it might be helpful to other folks.

webpack.config.dev.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

process.env.NODE_ENV = "development";

module.exports = {
  mode: "development",
  target: "web",
  devtool: "cheap-module-source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/",
    filename: "bundle.js",
  },

  devServer: {
    // stats: "minimal",
    // overlay: true,
    client: {
      logging: "info",
      overlay: true,
    },
    historyApiFallback: true,
    // disableHostCheck: true,
    allowedHosts: "all",
    headers: { "Access-Control-Allow-Origin": "*" },
    // https: false,
    server: {
      type: "http",
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      favicon: "src/favicon.ico",
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /(\.css)$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

#webpack, #webpack-cli, #webpack-dev-server, #webpack-bundle-analyzer

Steps to fix:

1. In your webpack js file, find the place where you import webpack dev server, for example const DevServer = require("webpack-dev-server");
2. Find the place where dev server is instantiated, like const server = new DevServer(piler, {rules:[...]})
3. swap 1st and 2nd arguments, it will bee something like const server = new DevServer({rules:[...]}, piler)