feat(gatsby-source-contentful): improve gatsby-plugin-image errors (#35068)

* feat(gatsby-source-contentful): improve gatsby-plugin-image errors

* add tests and move to onPreInit

Author: wardpeet

packages/gatsby-source-contentful/src/__tests__/gatsby-node.js

@@ -1,7 +1,11 @@
 // @ts-check
 // This is more an integration test than it is a unit test. We try to mock as little as we can
 import _ from "lodash"
-import { createSchemaCustomization, sourceNodes } from "../gatsby-node"
+import {
+  createSchemaCustomization,
+  sourceNodes,
+  onPreInit,
+} from "../gatsby-node"
 import { fetchContent, fetchContentTypes } from "../fetch"
 import { makeId } from "../normalize"
 
@@ -328,6 +332,94 @@ describe(`gatsby-node`, () => {
     reporter.panic.mockClear()
   })
 
+  let hasImported = false
+  describe(`onPreInit`, () => {
+    it(`should pass when gatsby-plugin-image is installed and configured`, async () => {
+      const reporter = {
+        panic: jest.fn(err => {
+          throw err
+        }),
+      }
+
+      await onPreInit({
+        store: {
+          getState: () => {
+            return {
+              flattenedPlugins: [
+                {
+                  name: `gatsby-plugin-image`,
+                },
+              ],
+            }
+          },
+        },
+        reporter,
+      })
+    })
+
+    it(`should throw when gatsby-plugin-image is not installed`, async () => {
+      const reporter = {
+        panic: jest.fn(err => {
+          throw err
+        }),
+      }
+
+      jest.doMock(`gatsby-plugin-image/graphql-utils`, () => {
+        if (hasImported) {
+          return jest.requireActual(`gatsby-plugin-image/graphql-utils`)
+        }
+
+        // only throw once
+        hasImported = true
+        throw new Error(`not installed`)
+      })
+
+      expect.assertions(2)
+      try {
+        await onPreInit({ store: {}, reporter })
+      } catch (err) {
+        console.log(err)
+        expect(err.id).toBe(`111005`)
+        expect(err.context).toMatchInlineSnapshot(`
+          Object {
+            "sourceMessage": "gatsby-plugin-image is missing from your project.
+          Please install \\"gatsby-plugin-image\\".",
+          }
+        `)
+      }
+    })
+    it(`should throw when gatsby-plugin-image is not configured`, async () => {
+      const reporter = {
+        panic: jest.fn(err => {
+          throw err
+        }),
+      }
+
+      expect.assertions(2)
+      try {
+        await onPreInit({
+          store: {
+            getState: () => {
+              return {
+                flattenedPlugins: [],
+              }
+            },
+          },
+          reporter,
+        })
+      } catch (err) {
+        console.log(err)
+        expect(err.id).toBe(`111005`)
+        expect(err.context).toMatchInlineSnapshot(`
+          Object {
+            "sourceMessage": "gatsby-plugin-image is missing from your gatsby-config file.
+          Please add \\"gatsby-plugin-image\\" to your plugins array.",
+          }
+        `)
+      }
+    })
+  })
+
   it(`should create nodes from initial payload`, async () => {
     // @ts-ignore
     fetchContent.mockImplementationOnce(startersBlogFixture.initialSync)

packages/gatsby-source-contentful/src/create-schema-customization.js

@@ -74,6 +74,9 @@ export async function createSchemaCustomization(
       pluginConfig,
     })
   }
+  const { getGatsbyImageFieldConfig } = await import(
+    `gatsby-plugin-image/graphql-utils`
+  )
 
   const contentfulTypes = [
     schema.buildInterfaceType({
@@ -96,10 +99,6 @@ export async function createSchemaCustomization(
     }),
   ]
 
-  const { getGatsbyImageFieldConfig } = await import(
-    `gatsby-plugin-image/graphql-utils`
-  )
-
   contentfulTypes.push(
     addRemoteFilePolyfillInterface(
       schema.buildObjectType({

packages/gatsby-source-contentful/src/gatsby-node.js

@@ -4,6 +4,7 @@ import origFetch from "node-fetch"
 import fetchRetry from "@vercel/fetch-retry"
 import { polyfillImageServiceDevRoutes } from "gatsby-plugin-utils/polyfill-remote-file"
 export { setFieldsOnGraphQLNodeType } from "./extend-node-type"
+import { CODES } from "./report"
 
 import { maskText } from "./plugin-options"
 
@@ -42,6 +43,34 @@ const validateContentfulAccess = async pluginOptions => {
   return undefined
 }
 
+export const onPreInit = async ({ store, reporter }) => {
+  // if gatsby-plugin-image is not installed
+  try {
+    await import(`gatsby-plugin-image/graphql-utils`)
+  } catch (err) {
+    reporter.panic({
+      id: CODES.GatsbyPluginMissing,
+      context: {
+        sourceMessage: `gatsby-plugin-image is missing from your project.\nPlease install "gatsby-plugin-image".`,
+      },
+    })
+  }
+
+  // if gatsby-plugin-image is not configured
+  if (
+    !store
+      .getState()
+      .flattenedPlugins.find(plugin => plugin.name === `gatsby-plugin-image`)
+  ) {
+    reporter.panic({
+      id: CODES.GatsbyPluginMissing,
+      context: {
+        sourceMessage: `gatsby-plugin-image is missing from your gatsby-config file.\nPlease add "gatsby-plugin-image" to your plugins array.`,
+      },
+    })
+  }
+}
+
 export const pluginOptionsSchema = ({ Joi }) =>
   Joi.object()
     .keys({

packages/gatsby-source-contentful/src/report.js

@@ -6,6 +6,7 @@ export const CODES = {
   SelfSignedCertificate: `111002`,
   SyncError: `111003`,
   FetchContentTypes: `111004`,
+  GatsbyPluginMissing: `111005`,
 }
 
 export const ERROR_MAP = {
@@ -34,4 +35,14 @@ export const ERROR_MAP = {
     level: `ERROR`,
     category: `THIRD_PARTY`,
   },
+  [CODES.FetchTags]: {
+    text: context => context.sourceMessage,
+    level: `ERROR`,
+    category: `THIRD_PARTY`,
+  },
+  [CODES.GatsbyPluginMissing]: {
+    text: context => context.sourceMessage,
+    level: `ERROR`,
+    category: `USER`,
+  },
 }