fix(gatsby-plugin-image): Conditionally require dependencies and give better warnings (#28921)

* Better error handling for missing dependencies

* fix eslint

* /reporter

Author: LB

packages/gatsby-plugin-image/package.json

@@ -76,6 +76,7 @@
     "gatsby": ">=2",
     "gatsby-image": "*",
     "gatsby-plugin-sharp": "*",
+    "gatsby-source-filesystem": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },

packages/gatsby-plugin-image/src/node-apis/image-processing.ts

@@ -5,13 +5,11 @@ import {
   Actions,
   Store,
 } from "gatsby"
-import * as PluginSharp from "gatsby-plugin-sharp"
-import { createFileNode } from "gatsby-source-filesystem/create-file-node"
 import fs from "fs-extra"
 import path from "path"
 import { ImageProps, SharpProps } from "../utils"
 import { watchImage } from "./watcher"
-import { createRemoteFileNode, FileSystemNode } from "gatsby-source-filesystem"
+import type { FileSystemNode } from "gatsby-source-filesystem"
 
 const supportedTypes = new Set([`image/png`, `image/jpeg`, `image/webp`])
 export interface IImageMetadata {
@@ -25,15 +23,27 @@ export async function createImageNode({
   fullPath,
   createNodeId,
   createNode,
+  reporter,
 }: {
   fullPath: string
   createNodeId: ParentSpanPluginArgs["createNodeId"]
   createNode: Actions["createNode"]
+  reporter: Reporter
 }): Promise<FileSystemNode | undefined> {
   if (!fs.existsSync(fullPath)) {
     return undefined
   }
-  const file: FileSystemNode = await createFileNode(fullPath, createNodeId, {})
+
+  let file: FileSystemNode
+  try {
+    const {
+      createFileNode,
+    } = require(`gatsby-source-filesystem/create-file-node`)
+    file = await createFileNode(fullPath, createNodeId, {})
+  } catch (e) {
+    reporter.panic(`Please install gatsby-source-filesystem`)
+    return undefined
+  }
 
   if (!file) {
     return undefined
@@ -75,6 +85,13 @@ export async function writeImages({
       let file: FileSystemNode | undefined
       let fullPath
       if (process.env.GATSBY_EXPERIMENTAL_REMOTE_IMAGES && isRemoteURL(src)) {
+        let createRemoteFileNode
+        try {
+          ;({ createRemoteFileNode } = require(`gatsby-source-filesystem`))
+        } catch (e) {
+          reporter.panic(`Please install gatsby-source-filesystem`)
+        }
+
         try {
           file = await createRemoteFileNode({
             url: src,
@@ -89,12 +106,12 @@ export async function writeImages({
           return
         }
         if (
-          !file.internal.mediaType ||
+          !file?.internal.mediaType ||
           !supportedTypes.has(file.internal.mediaType)
         ) {
           reporter.error(
             `The file loaded from ${src} is not a valid image type. Found "${
-              file.internal.mediaType || `unknown`
+              file?.internal.mediaType || `unknown`
             }"`
           )
           return
@@ -106,7 +123,16 @@ export async function writeImages({
           reporter.warn(`Could not find image "${src}". Looked for ${fullPath}`)
           return
         }
-        file = await createFileNode(fullPath, createNodeId, {})
+
+        try {
+          const {
+            createFileNode,
+          } = require(`gatsby-source-filesystem/create-file-node`)
+
+          file = await createFileNode(fullPath, createNodeId, {})
+        } catch (e) {
+          reporter.panic(`Please install gatsby-source-filesystem`)
+        }
       }
 
       if (!file) {
@@ -161,15 +187,21 @@ export async function writeImage(
   cache: GatsbyCache,
   filename: string
 ): Promise<void> {
+  let generateImageData
+  try {
+    generateImageData = require(`gatsby-plugin-sharp`).generateImageData
+  } catch (e) {
+    reporter.panic(`Please install gatsby-plugin-sharp`)
+  }
   try {
     const options = { file, args, pathPrefix, reporter, cache }
 
-    if (!PluginSharp.generateImageData) {
+    if (!generateImageData) {
       reporter.warn(`Please upgrade gatsby-plugin-sharp`)
       return
     }
     // get standard set of fields from sharp
-    const sharpData = await PluginSharp.generateImageData(options)
+    const sharpData = await generateImageData(options)
 
     if (sharpData) {
       // Write the image properties to the cache

packages/gatsby-plugin-image/src/node-apis/watcher.ts

@@ -1,7 +1,7 @@
 import chokidar, { FSWatcher } from "chokidar"
 import { Actions, ParentSpanPluginArgs, GatsbyCache, Reporter } from "gatsby"
 import { createImageNode, IImageMetadata, writeImage } from "./image-processing"
-import { FileSystemNode } from "gatsby-source-filesystem"
+import type { FileSystemNode } from "gatsby-source-filesystem"
 
 let watcher: FSWatcher | undefined
 
@@ -34,6 +34,7 @@ export function watchImage({
           fullPath: path,
           createNodeId,
           createNode,
+          reporter,
         })
         if (!node) {
           reporter.warn(`Could not process image ${path}`)