Webpack - [HMR] and [WDS] firing twice

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.

You have this line in your index.html.

<script src="/bundle.js"></script>

However, html-webpack-plugin will add another line that does the same, so you're running the entire app twice. You will want to remove that line.

The same goes for the (old) version of React you're loading in there, since React is already in the bundle.

HMR does not work when I click a button, The button is like this:

<a href="javascript:;" @click="start">Click!</a>

Delete the href attribute, HMR is working now. or

remove any hot thing from webpack config

I hope this is useful to you.