Update hot-reloading setup & disable on StackBlitz

Author: Oblosys

examples/parent-child-demo/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { hot } from 'react-hot-loader';
+import { hot } from 'react-hot-loader/root';
 import { resetInstanceIdCounters, Log } from 'react-lifecycle-visualizer';
 
 import './style.scss';
@@ -14,5 +14,7 @@ const App = () => (
   </div>
 );
 
-// Don't set up hot reloading on StackBlitz (where `module` is not defined.)
-export default typeof module === 'undefined' ? App : hot(module)(App);
+const isOnStackBlitz = module && module.id.match(/https:\/\/.+\.github\.stackblitz\.io\//);
+
+// StackBlitz already does hot reloading, and setting it up here again causes errors, so we disable it.
+export default  isOnStackBlitz ? App : hot(App);

package-lock.json

@@ -55,6 +55,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-stage-2": "^7.0.0",
+    "@hot-loader/react-dom": "^16.8.6",
     "@types/react": "^16.8.22",
     "@types/react-dom": "^16.8.4",
     "ajv": "^6.10.0",

package.json

@@ -9,6 +9,11 @@ module.exports = {
     filename: 'client-bundle.js',
     publicPath: '/dist-demo/'
   },
+  resolve: {
+    alias: {
+      'react-dom': '@hot-loader/react-dom'
+    }
+  },
   module: {
     rules: [{
       test: /\.(js|jsx)$/,