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"

Possible duplicate of [All my code runs twice when compiled by Webpack](https://stackoverflow.com/questions/37081559/all-my-code-runs-twice-when-compiled-by-webpack) — Maciej Goszczycki, Jan 07 '19 at 00:53
I can confirm it loads the code twice, because console log statements on top level will also print twice. — Joris Mans, Jun 29 '19 at 11:43

score 3 · Answer 1 · answered Jul 25 '20 at 15:41

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.

answered Jul 25 '20 at 15:41

Rakasiwi Surya

31
1

did the trick, thanks! – Ivan Hanák Jul 25 '22 at 16:20

score 2 · Answer 2 · answered Jun 30 '20 at 09:36

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.

I think my solution is exclusive to Vue.js, and I dont think it helps the OP. — John Waring, Jun 30 '20 at 09:39

score 0 · Answer 3 · answered Jul 02 '20 at 07:13

0

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.

answered Jul 02 '20 at 07:13

Raghul SK

1,256
5
22
30

Webpack - [HMR] and [WDS] firing twice

3 Answers3