Bump react-hot-loader version to 4

Author: Maciej Myśliński

packages/react-scripts/config/webpack.config.dev.js

@@ -41,8 +41,6 @@ module.exports = {
  // This means they will be the "root" imports that are included in JS bundle.
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
  entry: [
- // React Hot Loader v3
- require.resolve('react-hot-loader/patch'),
  // Include an alternative client for WebpackDevServer. A client's job is to
  // connect to WebpackDevServer by a socket and get notified about changes.
  // When you save a file, the client will either apply hot updates (in case

packages/react-scripts/package.json

@@ -77,7 +77,7 @@
  "devDependencies": {
  "react": "^16.0.0",
  "react-dom": "^16.0.0",
- "react-hot-loader": "^3.1.3",
+ "react-hot-loader": "^4.3.2",
  "normalize.css": "^7.0.0"
  },
  "optionalDependencies": {

packages/react-scripts/scripts/init.js

@@ -101,7 +101,7 @@ module.exports = function(
  command = 'npm';
  args = ['install', '--save', verbose && '--verbose'].filter(e => e);
  }
- args.push('react', 'react-dom', 'react-hot-loader@^3.1.3', 'normalize.css');
+ args.push('react', 'react-dom', 'react-hot-loader@^4.3.2', 'normalize.css');
 
  // Install additional template dependencies, if present
  const templateDependenciesPath = path.join(

packages/react-scripts/template/src/index.js

@@ -1,28 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
+import { hot } from 'react-hot-loader';
 import 'normalize.css';
 
 import App from 'components/App';
 import registerServiceWorker from 'utils/registerServiceWorker';
 
-function render(Component) {
- ReactDOM.render(
- <AppContainer>
- <Component />
- </AppContainer>,
- document.getElementById('root'),
- );
-}
+const HotApp = hot(module)(App);
 
-render(App);
-
-if (module.hot) {
- module.hot.accept('./components/App', () => {
- // eslint-disable-next-line global-require
- const nextApp = require('./components/App').default;
- render(nextApp);
- });
-}
+ReactDOM.render(<HotApp />, document.getElementById('root'));
 
 registerServiceWorker();