HMR without babel plugin

.js

///// ====================== babelrc

{
  "presets": [
    "env",
    "flow",
    "react"
  ],
  "plugins": [
    "flow-react-proptypes",
    "transform-object-rest-spread",
    ["module-resolver", {
      "root": ["./src"]
    }]
  ]
}

///// ====================== webpack

{
  entry: './src/client',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve('dist'),
    publicPath: 'http://localhost:7000/dist/',
  },
  module: { rules: [{ use: 'babel-loader', exclude: /node_modules/ }] },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  devServer: { hot: true, port: 7000, headers: { 'Access-Control-Allow-Origin': '*' } }
}


///// ====================== client.js

// @flow

import 'babel-polyfill'
import 'react-hot-loader/patch'

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer as HMR } from 'react-hot-loader'

import App from './app'

const rootEl = document.getElementById('root')

const render = (Component, el) => {
  ReactDOM.render(
    <HMR>
      <Component />
    </HMR>,
    el,
  )
}

render(App, rootEl)

if (module.hot) {
  // flow-disable-next-line
  module.hot.accept('./app', () => {
    // eslint-disable-next-line global-require
    const NextApp = require('./app').default
    render(NextApp, rootEl)
  })
}