Don't use hot-loader in the same place as ReactDOM.render

Author: Dominik Rowicki

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

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { hot } from 'react-hot-loader';
 import logo from './logo.svg';
 import LogoInline from './logo.inline.svg';
 import styles from './style.scss';
@@ -41,4 +42,5 @@ class App extends Component {
  }
 }
 
-export default App;
+export { App as AppUnwrapped };
+export default hot(module)(App);

packages/react-scripts/template/src/components/App/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './index';
+import { AppUnwrapped as App } from './index';
 
 it('renders without crashing', () => {
  const div = document.createElement('div');

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

@@ -1,13 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { hot } from 'react-hot-loader';
 import 'normalize.css';
 
 import App from 'components/App';
 import registerServiceWorker from 'utils/registerServiceWorker';
 
-const HotApp = hot(module)(App);
-
-ReactDOM.render(<HotApp />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
 
 registerServiceWorker();