Webpack - [HMR] and [WDS] firing twice

Question

I'm getting messages like [HMR] Waiting for update signal from WDS... and [WDS] Hot Module Replacement enabled. twice in Dev Tools console. Why is that? Am I doing something wrong?

My webpack.config.js file:

...  module.exports = () => {      return {          entry: {              bundle: './src/app/App.jsx',              sw: './src/app/sw.js'          },          output: {              filename: '[name].js',              path: path.resolve(__dirname, 'dist'),              globalObject: 'this'          },          devtool: 'source-map',          devServer: {              contentBase: path.resolve(__dirname, 'dist'),              historyApiFallback: true          },  ...          node: {              fs: 'empty',              net: 'empty',              tls: 'empty'          }      };  };

Versions: "webpack": "^4.27.1", "react-hot-loader": "^4.6.0", "webpack-dev-server": "^3.1.10"

Answer 1

I resolved this by removing the the auto injection line in public/index.html:

    <div id="app"></div> <!-- built files will be auto injected --> <!-- <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script> --> 

Previously I was building vue site and using a nodejs express server to serve it statically. When I changed to using 'vue-cli-service serve' exclusivly I encountered this issue.

I hope this information is helpful to someone.