Wrap root component in root.js not app.js so hot reloading can work

React-hot-loader v3 requires all sub components to be required in a different file.
gatsbyjs · Oct 31, 2016 · 36f2c16 · 36f2c16
1 parent 2d2c048
commit 36f2c16
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/lib/intermediate-representation-dir/app.js b/lib/intermediate-representation-dir/app.js
@@ -10,11 +10,9 @@ const rootElement = document.getElementById(`react-mount`)
 let Root = require('./root')
 if (Root.default) { Root = Root.default }
 
-// Let site, plugins wrap the site e.g. for Redux.
-const WrappedRoot = apiRunner('wrapRootComponent', { Root: Root }, Root)
 ReactDOM.render(
   <HotContainer>
-    <WrappedRoot />
+    <Root />
   </HotContainer>,
   rootElement
 )
@@ -23,11 +21,9 @@ if (module.hot) {
   module.hot.accept(`./root`, () => {
     let NextRoot = require('./root')
     if (NextRoot.default) { NextRoot = NextRoot.default }
-    // Let site, plugins wrap the site e.g. for Redux.
-    const WrappedRoot = apiRunner('wrapRootComponent', { Root: NextRoot }, NextRoot)
     ReactDOM.render(
       <HotContainer>
-        <WrappedRoot />
+        <NextRoot />
       </HotContainer>,
       rootElement
     )

diff --git a/lib/intermediate-representation-dir/root.js b/lib/intermediate-representation-dir/root.js
@@ -30,4 +30,7 @@ const Root = () => (
   />
 )
 
-export default Root
+// Let site, plugins wrap the site e.g. for Redux.
+const WrappedRoot = apiRunner('wrapRootComponent', { Root: Root }, Root)
+
+export default WrappedRoot