webpack-dev-server runs twice

Question

I have tried to fix this problem in several different ways, so I must start from the beginning.

I have a config file named webpack.dev.js, pictured here:

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/script.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },

  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "dist")
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "postcss-loader", "sass-loader"]
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({template: path.join("src", "index.html")}),
    new ExtractTextPlugin("style.css"),
    new CopyWebpackPlugin([{from: "src/images", to: "images"}])
  ]
};

So, I set up a start script in package.json for starting the dev server

"start": "webpack-dev-server --config webpack.dev.js"

Now is where the problems begin. When I ran the script, I got the following error

Invalid configuration object. webpack-dev-server has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'error'. These properties are valid:
   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }

As you can see, this error is very confusing, because there isn’t any error property on the config file

After trying different ways to fix this, I tried to just remove the devServer property and start the dev server with the default settings.

But now is when it gets weird. The output looks like if the web server was started twice:

Project is running at http://localhost:8080/
webpack output is served from /
Project is running at http://localhost:8081/
webpack output is served from /

And after that it logs several warnings about there being multiple modules with names that only differ in casing

Then after some googling I found out about someone else that also had this unknown property 'error' problem, and the reason it happened to him was that he had http-server running in the background.

So right now, my theory is that for some reason webpack-dev-server is running twice, in parallel, and that creates a race condition or error that triggers this unknown property 'error' problem.

I only found another two people with similar problems, and theirs were fixed by just adding inject: false to the configuration object of HtmlWebpackPlugin. Doing this didn’t make the error disappear, and when running it without the devServer configuration it just removed all js and css from the page, because it doesn’t inject the <link> and <script> tags into the html.

At this point I have no idea how to fix this problem, and that's why I’m asking if anyone can help me.

Answer 1

In your project folder, run npm uninstall webpack-dev-server.

I had same issue on fresh project with webpack-dev-server v2.9.1, having two servers running at one time. I realised that I had webpack-dev-server package installed twice, one in my project folder node_modules since it was listed as dependency in my package.json, and another installed globally so I simply removed the local one.

I've submitted an issue: https://github.com/webpack/webpack-dev-server/issues/1125

Answer 2

Seems to be related to webpack-dev-server version 2.8.0.

I solved the problem by downgrading to version ~2.7.0 (2.7.1).