title: Webpack Hot Module Replacement + React
body: <p>Probably it's one of thousands of similar questions, but I still didn't see any answer about how to make HMR <strong>REALLY</strong> work.</p>
  
  <p>I did all that manipulations, described in <a href="https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr" rel="nofollow noreferrer">docs</a> and in every answer you can find all over internet: </p>
  
  <ul>
  <li>enable "hot" option of webpack-dev-server</li>
  <li>add <code>webpack-dev-server/client?{host:port}</code> and <code>webpack/hot/only-dev-server</code> entry points</li>
  <li>add <code>new webpack.HotModuleReplacementPlugin()</code> to plugins (and NamedModulesPlugin too)</li>
  <li>every step from docs of <a href="https://github.com/gaearon/react-hot-loader#getting-started" rel="nofollow noreferrer">react-hot-loader</a></li>
  </ul>
  
  <p>And now what I have.</p>
  
  <p>Let say my app looks like this:</p>
  
  <pre><code>&lt;ReactRouter&gt;
    &lt;App&gt;
      &lt;AppRouter /&gt;
    &lt;/App&gt;
  &lt;/ReactRouter&gt;
  </code></pre>
  
  <p>where <code>AppRouter</code> is like</p>
  
  <pre><code>&lt;Switch&gt;
    &lt;Route path="..." component={Page} /&gt;
    ...
  &lt;/Switch&gt;
  </code></pre>
  
  <p>and <code>Page</code> is just <code>&lt;div&gt;some text&lt;div&gt;</code>.</p>
  
  <p>Accordingly to docs, in App module I do:</p>
  
  <pre><code>import { hot } from "react-hot-loader"
  export default hot(module)(App)
  </code></pre>
  
  <p>and then trying to modify text in <code>Page</code> component to "new text".</p>
  
  <p>In console I see that HMR is enabled indeed:</p>
  
  <pre><code>[WDS] App hot update...
  [HMR] Checking for updates on the server...
  [HMR] Updated modules:
  [HMR]  - ./Page.js
  [HMR]  - ./AppRouter.js
  [HMR]  - ./App.js
  [HMR] App is up to date.
  </code></pre>
  
  <p>and text on screen really updates to "new text". So far so good.</p>
  
  <p>Then I update text once again, to "new text 2", and see this:</p>
  
  <pre><code>Ignored an update to unaccepted module ./Page.js -&gt; ./AppRouter.js -&gt; ./App.js
  [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
  [HMR]  - ./Page.js
  </code></pre>
  
  <p>There is <strong>nothing</strong> about this in <code>react-hot-loader</code> docs.</p>
  
  <p>But ok, maybe that doc is slightly incorrect. After all, webpack own docs explicitly shows that we should do <code>module.hot.accept(...)</code> in our code.</p>
  
  <p>So in <code>App.js</code> I do:</p>
  
  <pre><code>if (module.hot) {
    module.hot.accept("./AppRouter", () =&gt; {
      console.log("It works!")
    })
  }
  </code></pre>
  
  <p>then refreshing the page, and trying to modify <code>Page</code> component again.</p>
  
  <p>Now console says following:</p>
  
  <pre><code>[WDS] App hot update...
  [HMR] Checking for updates on the server...
  App.js:20 It works!
  [HMR] Updated modules:
  [HMR]  - ./Page.js
  [HMR]  - ./AppRouter.js
  [HMR]  - ./App.js
  [HMR] App is up to date.
  </code></pre>
  
  <p>But <strong>text in browser is not updated</strong>. I.e., HMR is enabled but does nothing.</p>
  
  <p>Succeeding updates says:</p>
  
  <pre><code>[WDS] App hot update...
  [HMR] Checking for updates on the server...
  [HMR] Updated modules:
  [HMR]  - ./Page.js
  [HMR] App is up to date.
  </code></pre>
  
  <p>so at least we fixed previous error with <code>unaccepted changes</code> – but still nothing changes in browser.</p>
  
  <p>I tried to do <code>module.hot.accept(...)</code> both when App is decorated with <code>hot(module)</code> and when it's not – result is the same.</p>
  
  <p>And... what next? I did everything I can find in official docs, and nothing of it works. What am I doing wrong? </p>
  
  <p><em>(and please, please don't ask "provide your full webpack config before we talk". It's all default, accordingly to example from webpack docs. Don't waste our time on this)</em></p>