Full reloads with react-hot-loader/webpack

Description

I tried using react-hot-loader/webpack as described in the docs, because I’m not using babel in my setup. However, this way the hot reloading doesn’t work, it reloads the top level container losing the state of all nested components.

Expected behavior

It should work the same as in react-hot-loader/babel mode - components are swapped without losing state.

Actual behavior

All state of all the components is lost upon reloading.

Environment

React Hot Loader version: 3.0.0-beta7

Reproducible Demo

To reproduce:

git clone [e-mail]:KidkArolis/react-hot-boilerplate.git
git checkout webpack-loader-issue
npm install
npm start
open http://localhost:3000
vim src/Counter.js # and save, the counter resets, but it shouldn't

This is all I changed in the default react-hot-boilerplate: https://github.com/KidkArolis/react-hot-boilerplate/commit/c72df249e3b06586b8ec7fddb95174386a398b73

[KidkArolis]

I have diffed the bundle.js produced in both modes and here is a comparison of individual module:

react-hot-loader/babel

{
  /***/
  "./src/Layout.js":
  /***/
    (function(module, __webpack_exports__, __webpack_require__) {

    "use strict";
    /* harmony export (immutable) */
    __webpack_exports__["a"] = Layout;
    /* harmony import */
    var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__("./node_modules/react/react.js");
    /* harmony import */
    var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);


    function Layout(_ref) {
      var children = _ref.children;

      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
        'div',
        null,
        __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
          'h1',
          null,
          'Hello, world!'
        ),
        children
      );
    };

    var _temp = function() {
      if (typeof __REACT_HOT_LOADER__ === 'undefined') {
        return;
      }

      __REACT_HOT_LOADER__.register(Layout, 'Layout', '/Users/karolis/Desktop/react-hot-boilerplate/src/Layout.js');
    }();

    ;

    /***/
  })
}

react-hot-loader/webpack

{
  /***/
  "./src/Layout.js":
  /***/
    (function(module, __webpack_exports__, __webpack_require__) {

    "use strict";
    /* WEBPACK VAR INJECTION */
    (function(process, module) { /* harmony export (immutable) */
      __webpack_exports__["a"] = Layout;
      /* harmony import */
      var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__("./node_modules/react/react.js");
      /* harmony import */
      var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);


      function Layout(_ref) {
        var children = _ref.children;

        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
          'div',
          null,
          __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
            'h1',
            null,
            'Hello, world!'
          ),
          children
        );
      }

      ;
      (function register() { /* react-hot-loader/webpack */
        if (process.env.NODE_ENV !== 'production') {
          if (typeof __REACT_HOT_LOADER__ === 'undefined') {
            return;
          }
          if (typeof module.exports === 'function') {
            __REACT_HOT_LOADER__.register(module.exports, 'module.exports', "/Users/karolis/Desktop/react-hot-boilerplate/src/Layout.js");
            return;
          }
          for (var key in module.exports) {
            if (!Object.prototype.hasOwnProperty.call(module.exports, key)) {
              continue;
            }
            var namedExport = void 0;
            try {
              namedExport = module.exports[key];
            } catch (err) {
              continue;
            }
            __REACT_HOT_LOADER__.register(namedExport, key, "/Users/karolis/Desktop/react-hot-boilerplate/src/Layout.js");
          }
        }
      })();
      /* WEBPACK VAR INJECTION */
    }.call(__webpack_exports__, __webpack_require__("./node_modules/node-libs-browser/node_modules/process/browser.js"), __webpack_require__("./node_modules/webpack/buildin/harmony-module.js")(module)))

    /***/
  })
}

[gregberge]

About this issue, this is probably due to Webpack since you see a full reload. Also, Webpack plugin support is very limited (only module exports).