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'
        }
    };
};

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"

• javascript
• webpack
• webpack-dev-server
• webpack-hmr

• 1 Possible duplicate of All my code runs twice when piled by Webpack – Maciej Goszczycki Commented Jan 7, 2019 at 0:53
• 1 @mgoszcz2 That's not my situation. – Jan Chalupa Commented Jan 7, 2019 at 7:52
• I can confirm it loads the code twice, because console log statements on top level will also print twice. – Joris Commented Jun 29, 2019 at 11:43

3 Answers 3

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.

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.

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.