CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-dev-server
Jason1998
Jason1998

Reputation: 81

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. "_assetEmittingPreviousFiles"

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.

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

Upvotes: 8

Views: 4196

Answers (4)

Ilya Kharlamov
Ilya Kharlamov

Reputation: 3932

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(compiler, {rules:[...]})
  3. swap 1st and 2nd arguments, it will become something like const server = new DevServer({rules:[...]}, compiler)

Upvotes: 0

bakrall
bakrall

Reputation: 633

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

Upvotes: 4

Kishore Uppala
Kishore Uppala

Reputation: 349

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

Upvotes: 2

LuckyLuke
LuckyLuke

Reputation: 1064

Had sample problem, there is a thread on github repository. https://github.com/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 compiler must be passed.

This didn't worked:

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

This worked:

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

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

Upvotes: 6

Related Questions