javascript - webpack-dev-server runs twice - Stack Overflow

admin管理员组

文章数量:1292219

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?, press?, 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.

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?, press?, 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.

• javascript
• webpack
• webpack-dev-server

Share Follow asked Sep 18, 2017 at 1:57 Sr. KomodoSr. Komodo 17311 silver badge66 bronze badges 8

• I'm seeing the same thing with an existing project that's been working fine for months. A colleague is trying to get up and running and is hitting this exact issue with this ephemeral 'error' property. It doesn't make any sense because we're running everything in docker and we use npm-shrinkwrap... so he has the same environment as everyone else. Verified that he has the same webpack and webpack-dev-server versions as the rest of the team too... – Ghazgkull Commented Sep 19, 2017 at 16:27
• Getting the same thing. Maybe it is related to latest version? – Aymeric Gaurat-Apelli Commented Sep 19, 2017 at 16:53
• Same error started occurring today for me. – corsen Commented Sep 21, 2017 at 1:06
• out of curiosity, when you run this from the mand line, outside of an npm script, does the same issue arise? eg. ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.dev.js – shellscape Commented Sep 21, 2017 at 3:11
• Yep same error when run like that for me. – corsen Commented Sep 21, 2017 at 18:38

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

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./webpack/webpack-dev-server/issues/1125

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).

I also had to do the following to get this working in addition to uninstalling devserver via npm.

1. manually delete the webpack-dev-server folder from node modules.
2. Run npm init.

Black magic admittedly but once that was done it came to life - spent 2 hours on this so very grateful for OP pointing out that dev server was running twice.

本文标签： javascriptwebpackdevserver runs twiceStack Overflow