diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 062a371e397..95fe7d37c56 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/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
@@ -163,7 +161,6 @@ module.exports = {
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
use: [
- require.resolve('react-hot-loader/webpack'),
{
loader: require.resolve('babel-loader'),
options: {
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 722d1670a51..4be430c16d5 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
{
"name": "@netguru/react-scripts",
- "version": "2.0.2",
+ "version": "3.0.0",
"description": "Netguru configuration and scripts for Create React App",
"repository": "netguru/create-react-app",
"license": "MIT",
@@ -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": {
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 811e44f8e9f..b745944fd65 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/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(
diff --git a/packages/react-scripts/template/.babelrc b/packages/react-scripts/template/.babelrc
index 9ceecd5eea8..f2c775a0470 100644
--- a/packages/react-scripts/template/.babelrc
+++ b/packages/react-scripts/template/.babelrc
@@ -4,5 +4,6 @@
"es2015",
"stage-2",
"react"
- ]
+ ],
+ "plugins": ["react-hot-loader/babel"]
}
diff --git a/packages/react-scripts/template/src/components/App/index.js b/packages/react-scripts/template/src/components/App/index.js
index 3f970e13397..4fb68a58288 100644
--- a/packages/react-scripts/template/src/components/App/index.js
+++ b/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);
diff --git a/packages/react-scripts/template/src/components/App/index.test.js b/packages/react-scripts/template/src/components/App/index.test.js
index 68c9e34f745..11e0959fdbb 100644
--- a/packages/react-scripts/template/src/components/App/index.test.js
+++ b/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');
diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js
index fc9092b8b5e..a827ab2ebe5 100644
--- a/packages/react-scripts/template/src/index.js
+++ b/packages/react-scripts/template/src/index.js
@@ -1,28 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
import 'normalize.css';
import App from 'components/App';
import registerServiceWorker from 'utils/registerServiceWorker';
-function render(Component) {
- ReactDOM.render(
-
-
- ,
- document.getElementById('root'),
- );
-}
-
-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(, document.getElementById('root'));
registerServiceWorker();