Geek Answers Handbook

Webpack-dev-server runs twice

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

I have a configuration file called 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 the script to run in package.json to start the dev server

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

Now 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 the error property does not exist in the configuration file

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

But now that is getting weird. The result 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 the presence of multiple modules with names that only differ in casing

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

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

I found two more people with similar problems, and they were fixed by simply adding inject: false to the HtmlWebpackPlugin configuration HtmlWebpackPlugin . Doing this did not make the error disappear, and when it was run without the devServer configuration, it simply deleted all js and css from the page, because it does not enter the <link> and <script> in html.

At this moment, I have no idea how to fix this problem, and why I am asking if anyone can help me.

+7
javascript webpack webpack-dev-server
source share
3 answers

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

I had the same problem in a new project with webpack-dev-server v2.9.1, while running two servers at the same time. I realized that I had the webpack-dev-server package installed twice, one in my node_modules project node_modules , because it was listed as a dependency in my package.json , and the other was installed globally, so I just deleted the local file.

I submitted a question: https://github.com/webpack/webpack-dev-server/issues/1125

+1
source share

It seems to be related to webpack-dev-server version 2.8.0.

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

+2
source share

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

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

Admittedly, black magic, but as soon as it was done, it came to its senses, spent 2 hours on it, it is so very grateful for the OP, indicating that the dev server works twice.

0
source share

More articles:


All Articles