webpack-dev-server: wds cannot hot reload after upgrading from 3.2.1 to 3.4.0

Operating System: WSL
Node Version: 12.2.0
NPM Version: 6.9.0
webpack Version: 4.30.0
webpack-dev-server Version: 3.4.0
This is a bug
This is a modification request

Description

After upgrading my webpack-dev-server dependency to 3.4.0 from 3.2.1, the hot reload stopped working although there is no change in code. See gif below and steps to reproduce

Expected Behavior

Hot reload was working in 3.2.1 3 2 1

Actual Behavior

hmr not working

For Bugs; How can we reproduce the behavior?

My webpack.config.js is constructed dynamically and we run webpack through NodeJS API. You can try the repo here:

https://github.com/facebook/Docusaurus/

Run install (we use yarn workspaces and monorepo)

yarn // install at root

Run the website

cd website
yarn start

Go to http://localhost:3000/docs/introduction Edit file in website/docs/introduction.md and make changes. It should hot reload

Upgrade webpack-dev-server to 3.4.0 for packages/docusaurus/package.json and yarn again at project root.

Run the website again

cd website
yarn start

Notice that it is not able to hot reload now. It’s always live reload

For Features; What is the motivation and/or use-case for the feature?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (9 by maintainers)

Most upvoted comments

@evilebottnawi yes it worked. See the gif above. It works now

endiliey on May 17, 2019

@endiliey hm, let’s try fix:

go to node_modules/webpack-dev-server/client/index.js
Find reloadApp function
Change

if (_hot) {
    log.info('[WDS] App hot update...'); // eslint-disable-next-line global-require

    var hotEmitter = require('webpack/hot/emitter');

    hotEmitter.emit('webpackHotUpdate', currentHash);

    if (typeof self !== 'undefined' && self.window) {
      // broadcast update to window
      self.postMessage("webpackHotUpdate".concat(currentHash), '*');
    }
  } // allow refreshing the page only if liveReload isn't disabled


  if (_liveReload) {
    var rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src)

    var intervalId = self.setInterval(function () {
      if (rootWindow.location.protocol !== 'about:') {
        // reload immediately if protocol is valid
        applyReload(rootWindow, intervalId);
      } else {
        rootWindow = rootWindow.parent;

        if (rootWindow.parent === rootWindow) {
          // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
          applyReload(rootWindow, intervalId);
        }
      }
    });
  }

if (_hot) {
    log.info('[WDS] App hot update...'); // eslint-disable-next-line global-require

    var hotEmitter = require('webpack/hot/emitter');

    hotEmitter.emit('webpackHotUpdate', currentHash);

    if (typeof self !== 'undefined' && self.window) {
      // broadcast update to window
      self.postMessage("webpackHotUpdate".concat(currentHash), '*');
    }
  } else if (_liveReload) {
    var rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src)

    var intervalId = self.setInterval(function () {
      if (rootWindow.location.protocol !== 'about:') {
        // reload immediately if protocol is valid
        applyReload(rootWindow, intervalId);
      } else {
        rootWindow = rootWindow.parent;

        if (rootWindow.parent === rootWindow) {
          // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
          applyReload(rootWindow, intervalId);
        }
      }
    });
  }

alexander-akait on May 17, 2019

I just updated from 3.3.0 to 3.4.1 and reload stopped working completely, both hot and live. Seems that the websockets aren’t even trying to establish a connection. Could it be related or is it a different issue?

iMoses on May 20, 2019

Ok that’s super weird.

@hiroppy can you try this branch ? https://github.com/facebook/Docusaurus/tree/wds-3.4.0 Don’t forget to run install again at root folder with yarn

Could it be WSL issue (?) It was working fine in 3.2.1 though >.< 3 4 0

endiliey on May 17, 2019

@evilebottnawi Thanks for the fast reply. It seems that it’s happening for wds v3.3.1 too.

I suspect 3.30 or 3.3.1 caused the regression. Hope it helps. Let me know if you need more info ❤️

endiliey on May 17, 2019

Thanks for issue, regression

alexander-akait on May 17, 2019