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();