fix(gatsby-plugin-image): Ensure cache hash is unique (#37087)

Author: LekoArts

packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts

@@ -24,7 +24,7 @@ export default function attrs({
 }): PluginObj {
   return {
     visitor: {
-      JSXOpeningElement(nodePath): void {
+      JSXOpeningElement(nodePath, state): void {
         if (
           !nodePath
             .get(`name`)
@@ -49,6 +49,8 @@ export default function attrs({
           console.warn(`[gatsby-plugin-image] ${error}`)
         }
 
+        // Adding the filename to the hashing, like in "extractStaticImageProps" function
+        props.filename = state.filename
         const hash = hashOptions(props)
 
         const cacheDir = (this.opts as Record<string, string>)?.cacheDir

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -11,6 +11,7 @@ export interface IStaticImageProps
   extends Omit<GatsbyImageProps, "image">,
     Omit<ISharpGatsbyImageArgs, "backgroundColor"> {
   src: string
+  filename?: string
 }
 
 // These values are added by Babel. Do not add them manually

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

@@ -74,6 +74,7 @@ export function babelParseToAst(
  */
 export const extractStaticImageProps = (
   ast: babel.types.File,
+  filename: string,
   onError?: (prop: string, nodePath: NodePath) => void
 ): Map<string, IStaticImageProps> => {
   const images: Map<string, IStaticImageProps> = new Map()
@@ -93,6 +94,10 @@ export const extractStaticImageProps = (
         nodePath as unknown as NodePath<JSXOpeningElement>,
         onError
       ) as unknown as IStaticImageProps
+      // When the image props are the same for multiple StaticImage but they are in different locations
+      // the hash will be the same then. We need to make sure that the hash is unique.
+      image.filename = filename
+
       images.set(hashOptions(image), image)
     },
   })

packages/gatsby-plugin-image/src/node-apis/preprocess-source.ts

@@ -2,7 +2,7 @@ import { PreprocessSourceArgs } from "gatsby"
 import { babelParseToAst } from "./parser"
 import path from "path"
 import { extractStaticImageProps } from "./parser"
-import { codeFrameColumns } from "@babel/code-frame"
+import { codeFrameColumns, SourceLocation } from "@babel/code-frame"
 
 import { writeImages } from "./image-processing"
 import { getCacheDir } from "./node-utils"
@@ -46,16 +46,19 @@ export async function preprocessSource({
     },
   })
 
-  const images = extractStaticImageProps(ast, (prop, nodePath) => {
-    const { start, end } = nodePath.node.loc
-    const location = { start, end }
+  const images = extractStaticImageProps(ast, filename, (prop, nodePath) => {
+    const sourceLocation = nodePath.node.loc as SourceLocation
+    const { start, end } = sourceLocation
     reporter.error({
       id: `95314`,
       filePath: filename,
-      location,
+      location: {
+        start,
+        end,
+      },
       context: {
         prop,
-        codeFrame: codeFrameColumns(contents, nodePath.node.loc, {
+        codeFrame: codeFrameColumns(contents, sourceLocation, {
           linesAbove: 6,
           linesBelow: 6,
           highlightCode: true,