fix(gatsby-transformer-sharp): Warn when using unsupported ext… (#20782)

Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>

Author: LekoArts

packages/gatsby-transformer-sharp/src/__tests__/__snapshots__/gatsby-node.js.snap

@@ -41,3 +41,7 @@ Array [
   ],
 ]
 `;
+
+exports[`Process image nodes correctly doesn't create an ImageSharp node for a .gif file 1`] = `Array []`;
+
+exports[`Process image nodes correctly doesn't create an ImageSharp node for a .gif file 2`] = `Array []`;

packages/gatsby-transformer-sharp/src/__tests__/gatsby-node.js

@@ -27,4 +27,30 @@ describe(`Process image nodes correctly`, () => {
       expect(createParentChildLink).toHaveBeenCalledTimes(1)
     })
   })
+  it(`doesn't create an ImageSharp node for a .gif file`, async () => {
+    const node = {
+      extension: `gif`,
+      id: `whatever`,
+      children: [],
+      internal: {
+        contentDigest: `whatever`,
+      },
+    }
+    const createNode = jest.fn()
+    const createParentChildLink = jest.fn()
+    const actions = { createNode, createParentChildLink }
+    const createNodeId = jest.fn()
+    createNodeId.mockReturnValue(`uuid-from-gatsby`)
+
+    await onCreateNode({
+      node,
+      actions,
+      createNodeId,
+    }).then(() => {
+      expect(createNode.mock.calls).toMatchSnapshot()
+      expect(createParentChildLink.mock.calls).toMatchSnapshot()
+      expect(createNode).toHaveBeenCalledTimes(0)
+      expect(createParentChildLink).toHaveBeenCalledTimes(0)
+    })
+  })
 })

packages/gatsby-transformer-sharp/src/create-resolvers.js

@@ -0,0 +1,20 @@
+const supportedExtensions = require(`./supported-extensions`)
+
+module.exports = ({ createResolvers, reporter }) => {
+  const resolvers = {
+    File: {
+      childImageSharp: {
+        resolve: (parent, args, context, info) => {
+          if (!supportedExtensions[parent.extension]) {
+            reporter.warn(
+              `You can't use childImageSharp together with ${parent.name}.${parent.extension} — use publicURL instead. The childImageSharp portion of the query in this file will return null:\n${context.componentPath}`
+            )
+          }
+          return info.originalResolver(parent, args, context, info)
+        },
+      },
+    },
+  }
+
+  createResolvers(resolvers)
+}

packages/gatsby-transformer-sharp/src/gatsby-node.js

@@ -1,2 +1,3 @@
 exports.onCreateNode = require(`./on-node-create`)
 exports.createSchemaCustomization = require(`./customize-schema`)
+exports.createResolvers = require(`./create-resolvers`)

packages/gatsby-transformer-sharp/src/on-node-create.js

@@ -1,11 +1,4 @@
-const supportedExtensions = {
-  jpeg: true,
-  jpg: true,
-  png: true,
-  webp: true,
-  tif: true,
-  tiff: true,
-}
+import supportedExtensions from "./supported-extensions"
 
 module.exports = async function onCreateNode({ node, actions, createNodeId }) {
   const { createNode, createParentChildLink } = actions

packages/gatsby-transformer-sharp/src/supported-extensions.js

@@ -0,0 +1,10 @@
+const supportedExtensions = {
+  jpeg: true,
+  jpg: true,
+  png: true,
+  webp: true,
+  tif: true,
+  tiff: true,
+}
+
+export default supportedExtensions