HMR start-up success but page no update

[KingBarbarian]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

What you are reporting: HMR start-up success but page no update , please help！🌹

Expected behavior

What you think should happen: page update

Actual behavior

What actually happens: logs

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - 1054
[HMR] Consider using the NamedModulesPlugin for module names.
[HMR] App is up to date.

Environment

React Hot Loader version: 3.0.0-beta.7

Run these commands in the project folder and fill in their results:

1. node: v6.11.3
2. npm: v3.10.10
3. webpack: v3.5.6
4. webpack-dev-server: v2.9.2
5. redux: v3.7.2
6. react-redux: v5.0.6

Then, specify:

1. Operating system: macOS Sierra 10.12.6
2. Browser and version: chrome

Reproducible Demo

webpack.dev.conf.js

"use strict";

let path = require("path");
var utils = require("./utils");
var webpack = require("webpack");
var config = require("../config");
var merge = require("webpack-merge");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var OpenBrowserPlugin = require("open-browser-webpack-plugin");
var FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
let isProd = process.env.NODE_ENV === "production";
function resolve(dir) {
  return path.join(__dirname, "..", dir);
}

const baseWebpackConfig = {
  entry: {
    app: ['babel-polyfill',"./src/main.js"]
  },
  devServer: {
    port: config.dev.port,
    contentBase: './dist',
    hot: true
  },
  output: {
    path: config.build.assetsRoot,
    filename: "[name].js",
    publicPath: isProd
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: [".js", ".jsx", ".json"],
    modules: [resolve("src"), resolve("node_modules")],
    alias: {
      "@": resolve("src")
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: (function() {
          let _loader = ["babel-loader"];
          if (config.dev.cssModules) {
            _loader.push("webpack-module-hot-accept");
          }
          return _loader;
        })(),
        include: [resolve("src"), resolve("test")]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }
    ]
  }
};

Object.keys(baseWebpackConfig.entry).forEach(function(name) {
  baseWebpackConfig.entry[name] = ["react-hot-loader/patch"].concat(
    baseWebpackConfig.entry[name]
  );
  console.log(baseWebpackConfig.entry)
});

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  devtool: "#cheap-module-eval-source-map",
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true
    }),
    new OpenBrowserPlugin({
      url: `http://localhost:${config.dev.port}`
    })
  ]
});

.babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "safari >= 7"
          ]
        }
      }
    ],
    // Transpile React components to JavaScript
    "react"
  ],
  "plugins": [
    "transform-runtime",
    "transform-decorators-legacy",
    "react-hot-loader/babel",
    "babel-plugin-transform-class-properties",
    "transform-object-rest-spread",
    [
      "import",
      {
        "libraryName": "antd-mobile",
        "style": true
      }
    ]
  ],
  "comments": false,
  "env": {
    "test": {
      "presets": [
        "env"
      ],
      "plugins": [
        "istanbul"
      ]
    },
    "production": {
      "presets": [
        "react-optimize"
      ]
    }
  }
}

main.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import Routers from "@/routers";
import configureStore from "./stores/configureStore";
import { AppContainer } from "react-hot-loader";

const render = Component => {
  ReactDOM.render(
    <Provider store={configureStore()}>
      <AppContainer>
        <Component />
      </AppContainer>
    </Provider>,
    document.getElementById("app")
  );
};

render(Routers);

if (module.hot) {
  module.hot.accept();
}

[KingBarbarian]

Try using the following code,but still won't do

if (module.hot) {
  const NextApp = require('@/routers').default;
  module.hot.accept('@/routers', () => { render(NextApp) })
}

[theKashey]

AppContainer must be top most container.

[KingBarbarian]

@theKashey It doesn't respond

 ReactDOM.render(
    <AppContainer>
      <Provider store={configureStore()}>
        <Component />
      </Provider>
    </AppContainer>,
    document.getElementById("app")
  );

[pedroabreu]

You seem to be missing react-hot-loader/babel as a babel plugin

https://github.com/gaearon/react-hot-loader#getting-started

[nloding]

I am having the same issue. If I run react@15.6.2 with react-dom@15.6.2, it works just fine; if I update those to 16.0.0, I get the same scenario as above. The console shows no errors or warnings, nor does the webpack output, and it says App is up to date but nothing changes. My project is based off react-slingshot and my package.json and webpack.config.dev.js match what is available in react-slingshot on this commit: https://github.com/coryhouse/react-slingshot/commit/70850e3fe0ea9d746c14554774c5454ce1da7951, with the exception of updating react-hot-loader to 3.1.3 (though 3.0.0-beta.6 fails also)

For now, I'm rolling back to react v15 but would love to update to v16!

[theKashey]

PS: react-slingshot is using RHL's webpack-plugin. This is not related to this issue, as long it might cause only state loss, not nothing, but they should move to babel plugin.

If someone could provide any reproducible example - I'll be very excited.

[nloding]

I totally admit that I don't speak webpack or babel, but react-slingshot is using babel, and using babel-loader for jsx files, not react-hot-loader/webpack per the documentation. I don't think it's using RHL's webpack plugin ...

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },

I'll see if I can trim my code down to something I can share and still replicate the issue.

[theKashey]

@nloding - Yep, I did a mistake - saw react-hot-loader/patch in webpack.conf and thing about loader. Any way - I could not find where babel plugin is attached. PS: It is not related to this issue.

[nloding]

@theKashey true, there is no plugin in the babel config. I've added it to mine and it still doesn't work. I'm not sure why it isn't related, as I'm seeing the exact same issue. The console outputs [HMR] App up to date and lists the updated module, but nothing is actually updated. But only when I'm using react@16.0.0, it works fine with react@15.6.2. Is it not related because the configs are slightly different? The behavior I'm seeing is the same. I'm happy to open a separate issue if needed.

[theKashey]

Did you update react-mount as well? Will be components updated, if you will work with them (aka updated by normal React update cycle).

[nloding]

Here's my deps:

  "dependencies": {
    "aphrodite": "~1.2.3",
    "axios": "~0.16.2",
    "bootstrap": "~4.0.0-beta",
    "immutable": "~3.8.1",
    "lodash": "~4.17.4",
    "moment": "~2.18.1",
    "object-assign": "~4.1.0",
    "oidc-client": "~1.3.0",
    "prop-types": "15.5.10",
    "react": "15.6.2",
    "react-bootstrap-typeahead": "~2.0.0",
    "react-dom": "15.6.2",
    "react-moment": "~0.6.5",
    "react-quill": "~1.1.0",
    "react-redux": "~5.0.5",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "reactstrap": "~4.8.0",
    "redux": "~3.6.0",
    "redux-form": "~7.0.4",
    "redux-oidc": "~3.0.0-beta.14",
    "redux-thunk": "~2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "7.1.4",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.6",
    "babel-polyfill": "6.23.0",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.24.1",
    "browser-sync": "2.18.12",
    "chalk": "2.0.1",
    "concurrently": "3.5.0",
    "connect-history-api-fallback": "1.3.0",
    "copy-webpack-plugin": "4.2.3",
    "coveralls": "2.13.1",
    "css-loader": "0.28.7",
    "enzyme": "3.0.0",
    "enzyme-adapter-react-16": "1.0.0",
    "eslint": "4.2.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-react": "7.3.0",
    "eslint-watch": "3.1.2",
    "extract-text-webpack-plugin": "3.0.1",
    "file-loader": "0.11.2",
    "history": "4.6.0",
    "html-webpack-plugin": "2.29.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "20.0.4",
    "jest-cli": "20.0.4",
    "json-loader": "0.5.4",
    "mockdate": "2.0.1",
    "node-sass": "4.5.3",
    "opn-cli": "3.1.0",
    "postcss-loader": "2.0.6",
    "prompt": "1.0.0",
    "prop-types": "15.5.10",
    "raf": "3.3.2",
    "react-hot-loader": "3.1.3",
    "react-test-renderer": "16.0.0",
    "redux-immutable-state-invariant": "2.0.0",
    "replace": "0.3.0",
    "rimraf": "2.6.1",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.0",
    "url-loader": "0.5.9",
    "webpack": "3.1.0",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-dev-middleware": "1.11.0",
    "webpack-hot-middleware": "2.18.2",
    "webpack-md5-hash": "0.0.5"
  },

If I update react and react-dom to 16.0.0 or higher, it fails; it works with the versions you see above.

[nloding]

At this point it seems like HMR is swallowing some sort of error. Is there any way to increase the verbosity, or get some additional debugging statements out of it? If I throw a console.log in the module.hot.accept callback, it doesn't get called with v16 but does with v15, for instance.

[theKashey]

this is not depends on version of React or RHL

[nloding]

Do I need to look at webpack-hot-middleware then, if it's not RHL?

[theKashey]

The best way - just provide a reproducible demo.

[gregberge]

@nloding Can you please try next version, set up is simplified and it works better with React 16 and ES6 code. Feel free to reopen a new issue if you experienced some problems.

[nloding]

@neoziro will do, thanks. I'll update next week and report a new bug if issues persist.