fix(gatsby-recipes): fix GatsbyShadowFile resource — don't error if package isn't installed (#27790)

* fix(gatsby-recipes): fix GatsbyShadowFile resource — don't error if package isn't installed

* Update snapshots

* Turn comment into verbose log

* Somehow utila started causing errors w/ rollup 🤷‍♂️

* remove reporter

* revert addiing utila to rollup externals

Author: KyleAMathews

packages/gatsby-recipes/rollup.config.js

@@ -2,7 +2,7 @@ import resolve from "@rollup/plugin-node-resolve"
 import babel from "@rollup/plugin-babel"
 import commonjs from "@rollup/plugin-commonjs"
 import json from "@rollup/plugin-json"
-import replace from "@rollup/plugin-replace";
+import replace from "@rollup/plugin-replace"
 import autoExternal from "rollup-plugin-auto-external"
 import internal from "rollup-plugin-internal"
 import path from "path"
@@ -28,7 +28,7 @@ export default [
   {
     input: {
       index: `src/index.js`,
-      "graphql-server/server": `src/graphql-server/server.js`
+      "graphql-server/server": `src/graphql-server/server.js`,
     },
     output: {
       dir: `dist`,
@@ -39,8 +39,8 @@ export default [
     plugins: [
       replace({
         values: {
-          "process.env.NODE_ENV": JSON.stringify(`production`)
-        }
+          "process.env.NODE_ENV": JSON.stringify(`production`),
+        },
       }),
       excludeDevTools(),
       json(),
@@ -50,7 +50,7 @@ export default [
         exclude: `node_modules/**`,
       }),
       commonjs({
-        transformMixedEsModules: true
+        transformMixedEsModules: true,
       }),
       resolve({
         dedupe: [
@@ -63,10 +63,10 @@ export default [
           `@mdx-js/mdx`,
           `@mdx-js/react`,
           `@mdx-js/runtime`,
-          `urql`, 
+          `urql`,
           `@urql/core`,
           `subscriptions-transport-ws`,
-        ]
+        ],
       }),
       autoExternal(),
       internal([
@@ -108,20 +108,14 @@ export default [
         exclude: `node_modules/**`,
       }),
       commonjs({
-        transformMixedEsModules: true
+        transformMixedEsModules: true,
       }),
       resolve({
-        dedupe: [
-          `@mdx-js/react`,
-        ]
+        dedupe: [`@mdx-js/react`],
       }),
       autoExternal(),
-      internal([
-        `@mdx-js/react`
-      ])
+      internal([`@mdx-js/react`]),
     ],
-    external: [
-      `react`
-    ]
-  }
+    external: [`react`],
+  },
 ]

packages/gatsby-recipes/src/providers/gatsby/__snapshots__/shadow-file.test.js.snap

@@ -16,6 +16,12 @@ export default () => <h1>F. Scott Fitzgerald</h1>
 exports[`Shadow File resource e2e shadow file resource test: GatsbyShadowFile create plan 1`] = `
 Object {
   "currentState": Object {},
+  "dependsOn": Array [
+    Object {
+      "name": "gatsby-theme-blog",
+      "resourceName": "NPMPackage",
+    },
+  ],
   "describe": "Shadow src/components/author.js from the theme gatsby-theme-blog",
   "diff": "- Original  - 0
 + Modified  + 4
@@ -77,6 +83,12 @@ export default () => <h1>F. Scott Fitzgerald</h1>
     "path": "src/gatsby-theme-blog/components/author.js",
     "theme": "gatsby-theme-blog",
   },
+  "dependsOn": Array [
+    Object {
+      "name": "gatsby-theme-blog",
+      "resourceName": "NPMPackage",
+    },
+  ],
   "describe": "Shadow src/components/author.js from the theme gatsby-theme-blog",
   "diff": "Compared values have no visual difference.",
   "id": "src/gatsby-theme-blog/components/author.js",

packages/gatsby-recipes/src/providers/gatsby/shadow-file.js

@@ -104,6 +104,7 @@ const message = resource =>
 
 export const plan = async ({ root }, { theme, path: filePath, id }) => {
   let currentResource = ``
+  let newContents = ``
   if (!id) {
     // eslint-disable-next-line
     id = relativePathForShadowedFile({ theme, filePath })
@@ -114,22 +115,29 @@ export const plan = async ({ root }, { theme, path: filePath, id }) => {
   // eslint-disable-next-line
   const fullFilePathToShadow = path.join(root, `node_modules`, theme, filePath)
 
-  const newContents = await fs.readFile(fullFilePathToShadow, `utf8`)
+  try {
+    newContents = await fs.readFile(fullFilePathToShadow, `utf8`)
+  } catch (e) {
+    // We couldn't read the specified ShadowFile while planning. Probably just doesn't
+    // exist yet because the theme's NPMPackage isn't yet installed
+  }
+
   const newResource = {
     id,
     theme,
     path: filePath,
     contents: newContents,
   }
 
-  const diff = await getDiff(currentResource.contents || ``, newContents)
+  const diff = await getDiff(currentResource?.contents || ``, newContents)
 
   return {
     id,
     theme,
     path: filePath,
     diff,
     currentState: currentResource,
+    dependsOn: [{ resourceName: `NPMPackage`, name: theme }],
     newState: newResource,
     describe: `Shadow ${filePath} from the theme ${theme}`,
   }