CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-serverwebpack-hmr
Jan Chalupa
Jan Chalupa

Reputation: 897

Webpack - [HMR] and [WDS] firing twice

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?

Console screenshot

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"

Upvotes: 24

Views: 2853

Answers (3)

Rakasiwi Surya
Rakasiwi Surya

Reputation: 31

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.

Upvotes: 3

Raghul SK
Raghul SK

Reputation: 1390

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.

Upvotes: 0

John Waring
John Waring

Reputation: 121

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.

Upvotes: 2

Related Questions