title: React HMR with SSR
body: <p>I am trying to setup SSR for React-application, when I am starting server at the first time in <code>development</code> environment all works good (server sending browser HTML and CSS), after changing source code of my application I getting an error:</p>
  
  <p><a href="https://i.stack.imgur.com/yEcen.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yEcen.png" alt="enter image description here"></a></p>
  
  <p>This error was throwing because on server source code is outdated, but client has a new version and React notify me over this trouble. I think the solve of this trouble is mechanism called HMR (hot module replacement), but setting up this is hard for me.</p>
  
  <p>My server Webpack-config looks like this:</p>
  
  <pre><code>const serverConfig = merge(commonConfig, {
    name: 'server',
    target: 'node',
    externals: [
      nodeExternals({
        whitelist: ['webpack/hot/poll?1000'],
      }),
    ],
    entry: ['webpack/hot/poll?1000', appServerEntry],
    output: {
      path: path.resolve(appDist, 'server'),
      filename: 'index.js',
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    resolve: {
      extensions: ['.js', '.jsx', '.json'],
    },
  });
  </code></pre>
  
  <p>On each request server render a new version of UI</p>
  
  <pre><code>app.get('*', (request, response) =&gt; {
    const staticAssets = getStaticAssets();
    const routerContext = {};
    const renderStream = renderDocumentToStream({
      staticAssets,
      request,
      routerContext,
    });
    const cacheStream = createCacheStream(request.path);
  
    response.writeHead(200, { 'Content-Type': 'text/html' });
    response.write('&lt;!DOCTYPE html&gt;');
  
    cacheStream.pipe(response);
    renderStream.pipe(cacheStream);
  });
  </code></pre>
  
  <p>For the hot reload I use <code>webpackDevMiddleware</code> and <code>webpackHotMiddleware</code></p>
  
  <pre><code>const webpackInstance = webpack(webpackConfig);
  const clientCompiler = webpackInstance.compilers.find(cmpl =&gt; cmpl.name === 'client');
  
  app.use(
    webpackDevMiddleware(clientCompiler, {
      hot: true,
      stats: 'errors-only',
    }),
  );
  app.use(webpackHotMiddleware(clientCompiler));
  </code></pre>
  
  <p><code>renderDocumentToStream</code> function intended for render <code>App</code> to <code>NodeStream</code>:</p>
  
  <pre><code>import App from './App';
  
  renderDocumentToStream: ({ request, staticAssets, routerContext }) =&gt; {
    const rootMarkup = renderToString(
      &lt;StaticRouter location={request.url} context={routerContext}&gt;
        &lt;App /&gt;
      &lt;/StaticRouter&gt;
    );
  
    return renderToNodeStream(
      &lt;Document
        rootMarkup={rootMarkup}
        staticAssets={staticAssets}
      /&gt;,
    );
  },
  
  if (module.hot) {
    console.log('HERE-0');
    module.hot.accept('./App', () =&gt; {
      console.log('HERE-1');
    });
  }
  </code></pre>
  
  <p>When server is starting in <code>stdout</code> logged first call of <code>console.log</code></p>
  
  <p><a href="https://i.stack.imgur.com/uGlGL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uGlGL.png" alt="enter image description here"></a></p>
  
  <p>second call of <code>console.log</code> not logged, even after <code>App.jsx</code> has been changed</p>
  
  <p><a href="https://i.stack.imgur.com/JY4YD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JY4YD.png" alt="enter image description here"></a></p>
  
  <p>What a im doing wrong?</p>