enable hot reloading

.babelrc

@@ -51,7 +51,16 @@
     "development": {
       "plugins": [
         "babel-plugin-styled-components",
-        "react-hot-loader/babel"
+        "react-refresh/babel"
+      ],
+      "presets": [
+        [
+          "@babel/preset-react",
+          {
+            "development": true,
+            "runtime": "automatic"
+          }
+        ]
       ]
     }
   },

client/index.jsx

@@ -1,6 +1,5 @@
 import React, { Suspense } from 'react';
 import { render } from 'react-dom';
-import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 
@@ -28,11 +27,9 @@ const App = () => (
   </Provider>
 );
 
-const HotApp = hot(App);
-
 render(
   <Suspense fallback={<Loader />}>
-    <HotApp />
+    <App />
   </Suspense>,
   document.getElementById('root')
 );

client/modules/Preview/previewIndex.jsx

@@ -1,6 +1,5 @@
 import React, { useReducer, useState, useEffect } from 'react';
 import { render } from 'react-dom';
-import { hot } from 'react-hot-loader/root';
 import { createGlobalStyle } from 'styled-components';
 import {
   registerFrame,
@@ -72,6 +71,4 @@ const App = () => {
   );
 };
 
-const HotApp = hot(App);
-
-render(<HotApp />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));