diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js
index 927e47699fe38..1c0d9072722fa 100644
--- a/packages/gatsby/src/cache-dir/production-app.js
+++ b/packages/gatsby/src/cache-dir/production-app.js
@@ -2,7 +2,7 @@ import apiRunner from "./api-runner-browser"
 // Let the site/plugins run code very early.
 apiRunner(`onClientEntry`)
 
-import React from "react"
+import React, { createElement } from "react"
 import ReactDOM from "react-dom"
 import {
   BrowserRouter as Router,
@@ -117,9 +117,14 @@ window.___loadScriptsForPath = loadScriptsForPath
 window.___navigateTo = navigateTo
 
 const history = createHistory()
-history.listen((location, action) => {
-  apiRunner(`onRouteUpdate`, { location, action })
-})
+
+function attachToHistory(history) {
+  window.___history = history
+
+  history.listen((location, action) => {
+    apiRunner(`onRouteUpdate`, { location, action })
+  })
+}
 
 function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {
   const results = apiRunner(`shouldUpdateScroll`, {
@@ -155,12 +160,12 @@ const renderPage = props => {
       `Page cache miss at ${props.location.pathname} for key ${page.path}. Available keys: ${Object.keys(scriptsCache)}`
     )
 
-    return $(pageCache.component, {
+    return createElement(pageCache.component, {
       ...props,
       ...pageCache.pageData,
     })
   } else if (notFoundScripts) {
-    return $(notFoundScripts.component, {
+    return createElement(notFoundScripts.component, {
       ...props,
       ...notFoundScripts.pageData,
     })
@@ -169,11 +174,10 @@ const renderPage = props => {
   }
 }
 
-const $ = React.createElement
-
 const AltRouter = apiRunner(`replaceRouterComponent`, { history })[0]
-const DefaultRouter = ({ children }) =>
+const DefaultRouter = ({ children }) => (
   <Router history={history}>{children}</Router>
+)
 
 loadScriptsForPath(window.location.pathname, scripts => {
   // Use default layout if one isn't set.
@@ -185,17 +189,17 @@ loadScriptsForPath(window.location.pathname, scripts => {
   }
 
   const Root = () =>
-    $(
+    createElement(
       AltRouter ? AltRouter : DefaultRouter,
       null,
-      $(
+      createElement(
         ScrollContext,
         { shouldUpdateScroll },
-        $(withRouter(layout), {
+        createElement(withRouter(layout), {
           children: layoutProps =>
-            $(Route, {
+            createElement(Route, {
               render: routeProps => {
-                window.___history = routeProps.history
+                attachToHistory(routeProps.history)
                 const props = layoutProps ? layoutProps : routeProps
                 return renderPage(props)
               },
diff --git a/packages/gatsby/src/cache-dir/root.js b/packages/gatsby/src/cache-dir/root.js
index 3e48d4d632866..fae0ffece8003 100644
--- a/packages/gatsby/src/cache-dir/root.js
+++ b/packages/gatsby/src/cache-dir/root.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { createElement } from "react"
 import {
   BrowserRouter as Router,
   Route,
@@ -13,9 +13,14 @@ import syncRequires from "./sync-requires"
 import pages from "./pages.json"
 
 const history = createHistory()
-history.listen((location, action) => {
-  apiRunner(`onRouteUpdate`, location, action)
-})
+
+function attachToHistory(history) {
+  window.___history = history
+
+  history.listen((location, action) => {
+    apiRunner(`onRouteUpdate`, { location, action })
+  })
+}
 
 function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {
   const results = apiRunner(`shouldUpdateScroll`, {
@@ -41,10 +46,10 @@ const noMatch = pages.find(r => r.path === `/dev-404-page/`)
 
 const addNotFoundRoute = () => {
   if (noMatch) {
-    return $(Route, {
+    return createElement(Route, {
       key: `404-page`,
       component: props =>
-        $(syncRequires.components[noMatch.componentChunkName], {
+        createElement(syncRequires.components[noMatch.componentChunkName], {
           ...props,
           ...syncRequires.json[noMatch.jsonName],
         }),
@@ -61,8 +66,9 @@ const navigateTo = pathname => {
 window.___navigateTo = navigateTo
 
 const AltRouter = apiRunner(`replaceRouterComponent`, { history })[0]
-const DefaultRouter = ({ children }) =>
+const DefaultRouter = ({ children }) => (
   <Router history={history}>{children}</Router>
+)
 
 // Use default layout if one isn't set.
 let layout
@@ -73,17 +79,18 @@ if (syncRequires.layouts[`index`]) {
 }
 
 const Root = () =>
-  $(
+  createElement(
     AltRouter ? AltRouter : DefaultRouter,
     null,
-    $(
+    createElement(
       ScrollContext,
       { shouldUpdateScroll },
-      $(withRouter(layout), {
+      createElement(withRouter(layout), {
         children: layoutProps =>
-          $(Route, {
+          createElement(Route, {
             render: routeProps => {
-              window.___history = routeProps.history
+              attachToHistory(routeProps.history)
+
               const props = layoutProps ? layoutProps : routeProps
               const page = pages.find(page => {
                 if (page.matchPath) {
@@ -102,10 +109,13 @@ const Root = () =>
                 }
               })
               if (page) {
-                return $(syncRequires.components[page.componentChunkName], {
-                  ...props,
-                  ...syncRequires.json[page.jsonName],
-                })
+                return createElement(
+                  syncRequires.components[page.componentChunkName],
+                  {
+                    ...props,
+                    ...syncRequires.json[page.jsonName],
+                  }
+                )
               } else {
                 return addNotFoundRoute()
               }