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"

Haye

Possible duplicate of All my code runs twice when compiled by Webpack – Faiyum

@mgoszcz2 That's not my situation. – Haye

I can confirm it loads the code twice, because console log statements on top level will also print twice. – Xylotomous

Answer 1

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.

Miguelmiguela

did the trick, thanks! – Selfanalysis

Answer 2

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.

Lincolnlincolnshire

I think my solution is exclusive to Vue.js, and I dont think it helps the OP. – Lincolnlincolnshire

Answer 3

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.

Uriah