Fix loading the layout component in the frontend (#3049)

Broken earlier by #3039
gatsbyjs · Nov 28, 2017 · e9bb320 · e9bb320
1 parent 0cedc0e
commit e9bb320
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js
@@ -66,11 +66,14 @@ const fetchResource = (resourceName, cb = () => {}) => {
     })
   } else {
     // Find resource
-    const resourceFunction =
-      resourceName.slice(0, 12) === `component---`
-        ? asyncRequires.components[resourceName] ||
-          asyncRequires.layouts[resourceName]
-        : asyncRequires.json[resourceName]
+    let resourceFunction
+    if (resourceName.slice(0, 12) === `component---`) {
+      resourceFunction = asyncRequires.components[resourceName]
+    } else if (resourceName.slice(0, 9) === `layout---`) {
+      resourceFunction = asyncRequires.layouts[resourceName]
+    } else {
+      resourceFunction = asyncRequires.json[resourceName]
+    }
 
     // Download the resource
     resourceFunction((err, executeChunk) => {

diff --git a/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js b/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js
@@ -20,7 +20,7 @@ const writePages = async () => {
         ...mem,
         {
           componentChunkName,
-          layout,
+          layout: layoutOjb ? layoutOjb.machineId : layout,
           layoutComponentChunkName: layoutOjb && layoutOjb.componentChunkName,
           jsonName,
           path,
@@ -86,7 +86,7 @@ const preferDefault = m => m && m.default || m
   syncRequires += `exports.layouts = {\n${pageLayouts
     .map(
       l =>
-        `  "${l.id}": preferDefault(require("${
+        `  "${l.machineId}": preferDefault(require("${
           l.componentWrapperPath
         }"))`
     )
@@ -124,7 +124,7 @@ const preferDefault = m => m && m.default || m
   asyncRequires += `exports.layouts = {\n${pageLayouts
     .map(
       l =>
-        `  "${l.id}": require("gatsby-module-loader?name=${
+        `  "${l.machineId}": require("gatsby-module-loader?name=${
           l.componentChunkName
         }!${l.componentWrapperPath}")`
     )

diff --git a/packages/gatsby/src/joi-schemas/joi.js b/packages/gatsby/src/joi-schemas/joi.js
@@ -15,6 +15,7 @@ export const gatsbyConfigSchema = Joi.object().keys({
 export const layoutSchema = Joi.object()
   .keys({
     id: Joi.string().required(),
+    machineId: Joi.string().required(),
     component: Joi.string().required(),
     componentWrapperPath: Joi.string().required(),
     componentChunkName: Joi.string().required(),

diff --git a/packages/gatsby/src/redux/__tests__/__snapshots__/layouts.js.snap b/packages/gatsby/src/redux/__tests__/__snapshots__/layouts.js.snap
@@ -13,6 +13,7 @@ Object {
     "internalComponentName": "Component-layout-Index",
     "isLayout": true,
     "jsonName": "layout-index.json",
+    "machineId": "layout---index",
     "pluginCreator___NODE": "Plugin test",
   },
   "plugin": Object {
@@ -36,6 +37,7 @@ Array [
     "internalComponentName": "Component-layout-Index",
     "isLayout": true,
     "jsonName": "layout-index.json",
+    "machineId": "layout---index",
     "pluginCreator___NODE": "Plugin test",
   },
 ]
@@ -52,6 +54,7 @@ Object {
     "internalComponentName": "Component-layout-Index",
     "isLayout": true,
     "jsonName": "layout-index.json",
+    "machineId": "layout---index",
     "pluginCreator___NODE": "Plugin test",
   },
   "plugin": Object {
@@ -73,6 +76,7 @@ Array [
     "internalComponentName": "Component-layout-Index",
     "isLayout": true,
     "jsonName": "layout-index.json",
+    "machineId": "layout---index",
     "pluginCreator___NODE": "Plugin test",
   },
 ]
@@ -89,6 +93,7 @@ Object {
     "internalComponentName": "Component-layout-TestId",
     "isLayout": true,
     "jsonName": "layout-test-id.json",
+    "machineId": "layout---test-id",
     "pluginCreator___NODE": "Plugin test",
   },
   "plugin": Object {
@@ -110,6 +115,7 @@ Array [
     "internalComponentName": "Component-layout-TestId",
     "isLayout": true,
     "jsonName": "layout-test-id.json",
+    "machineId": "layout---test-id",
     "pluginCreator___NODE": "Plugin test",
   },
 ]
@@ -126,6 +132,7 @@ Array [
     "internalComponentName": "Component-layout-Index",
     "isLayout": true,
     "jsonName": "layout-index.json",
+    "machineId": "layout---index",
     "pluginCreator___NODE": "Plugin test",
   },
   Object {
@@ -137,6 +144,7 @@ Array [
     "internalComponentName": "Component-layout-Pizza",
     "isLayout": true,
     "jsonName": "layout-pizza.json",
+    "machineId": "layout---pizza",
     "pluginCreator___NODE": "Plugin test",
   },
 ]

diff --git a/packages/gatsby/src/redux/actions.js b/packages/gatsby/src/redux/actions.js
@@ -30,6 +30,7 @@ type PageInput = {
 }
 type LayoutInput = {
   id?: string,
+  machineId?: string,
   component: string,
   layout?: string,
   context?: Object,
@@ -187,6 +188,9 @@ actions.createLayout = (
   traceId?: string
 ) => {
   let id = layout.id || path.parse(layout.component).name
+  // Add a "machine" id as a universal ID to differentiate layout from
+  // page components.
+  const machineId = `layout---${id}`
   let componentWrapperPath = joinPath(
     store.getState().program.directory,
     `.cache`,
@@ -196,6 +200,7 @@ actions.createLayout = (
 
   let internalLayout: Layout = {
     id,
+    machineId,
     componentWrapperPath,
     isLayout: true,
     jsonName: `layout-${_.kebabCase(id)}.json`,