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

[endiliey]

• 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

• [x] 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

Actual Behavior

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?

[alexander-akait]

Thanks for issue, regression

[endiliey]

@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 ❤️

[hiroppy]

maybe related https://github.com/webpack/webpack-dev-server/pull/1889

[alexander-akait]

Yes related, we need search way how testing client

[hiroppy]

@endiliey hmm... I couldn't meet this bug in facebook/Docusaurus...

[endiliey]

@hiroppy facebook/Docusaurus was fine. Did you upgrade to 3.4.0 and then try it ? After the upgrade it broke

Edit: Let me create a branch for it

[hiroppy]

yeah, I updated [email protected]...

[endiliey]

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 >.<

[alexander-akait]

@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);
        }
      }
    });
  }

to

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

[hiroppy]

@endiliey Thank you. I met this issue.😇

[endiliey]

It worked after I applied your patch @evilebottnawi 😄 seems that the liveReload overwrite the hot :|

[hiroppy]

@endiliey Thank you for confirming. We'll fix and release a patch version as soon as possible.

[endiliey]

Sure thing. Thanks a lot for the fast response. Awesome 🎉

By the way I've also verified that it still fall backs to livereload if hot reload is not working.

Did it by removing "accept the updated module" function like

if (module.hot) {
    module.hot.accept(.....) {
   // some code
}

[alexander-akait]

@endiliey hm, fix above solve problem?

[endiliey]

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

[iMoses]

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?

[endiliey]

I think it might be different issue. This issue was about livereload taking precedence against hot reload