fix(gatsby-plugin-mdx) for image import name collisions in mdx files

e2e-tests/mdx/cypress/integration/pages.js

@@ -35,4 +35,14 @@ describe(`Pages`, () => {
         cy.visit(`/list`).waitForRouteChange()
         cy.getTestElement(`embed-slug`).contains(`about/embedded`)
     })
+
+    it (`generates a page with an image import for a jpg`, () => {
+        cy.visit(`/mdx_import1`).waitForRouteChange()
+        cy.getTestElement(`purple-png-image`).invoke('height').should('eq', 512)
+    })
+
+    it (`generates a page with an image import for a png`, () => {
+        cy.visit(`/mdx_import2`).waitForRouteChange()
+        cy.getTestElement(`green-png-image`).invoke('height').should('eq', 1024)
+    })
 })

e2e-tests/mdx/src/pages/mdx_import1/index.mdx

@@ -0,0 +1,3 @@
+import prettyImage from "./gatsby-icon.png"
+
+<img data-testid="purple-png-image" src={prettyImage} />

e2e-tests/mdx/src/pages/mdx_import2/index.mdx

@@ -0,0 +1,3 @@
+import prettyImage from "./gatsby-icon.png"
+
+<img data-testid="green-png-image" src={prettyImage} />

packages/gatsby-plugin-mdx/gatsby/on-create-node.js

@@ -40,12 +40,66 @@ async function onCreateNode(api, pluginOptions) {
     return
   }
 
+  /** @type string */
   const content = await api.loadNodeContent(api.node)
 
+  /** Captures the import name when used on a file with an extension up to 4 chars long. e.g
+   * `import pic from file.jpeg` or `import * as pic from file.jpeg` */
+  const importFinderRegexp = `import {?(?:\\*\\s+as\\s+)?(.*)(?:}?\\s*from\\s+['"].*\\.(?:avif|bmp|jpe?g|gif|png|svg|webp)['"])`
+  /** An array of file imports, e.g. `import pic from file.jpeg`
+   * @type RegExpMatchArray */
+  const fileImports = []
+  /** @type string[] */
+  const namedImports = []
+  Array.from(
+    content.matchAll(RegExp(importFinderRegexp, `gm`)),
+    (search, idx) => {
+      fileImports[idx] = search[0]
+      namedImports[idx] = search[1]
+    }
+  )
+  const importId = api.node.id.replace(/-/g, ``)
+
+  const renamedImports = fileImports?.map((fileImport, index) =>
+    fileImport.replace(
+      namedImports[index],
+      `${namedImports[index].trim()}_${importId} `
+    )
+  )
+
+  /** @type string */
+  let fixedContent = content
+  if (fileImports?.length !== renamedImports?.length) {
+    // Throw error
+    api.reporter.error(
+      `Error: the number of namespaced imports and found imports do not match in gatsby-plugin-mdx's onCreateNode`
+    )
+  } else {
+    try {
+      if (fileImports.length > 0) {
+        fileImports.forEach((item, index) => {
+          const namedImport = namedImports[index].trim()
+          fixedContent = fixedContent
+            // 1st replacement: replace given import, with uid postfixed imports
+            .replace(item, renamedImports[index])
+            // 2nd replacement: check for src={importName} and globally replace it regardless of surrounding space
+            .replace(
+              RegExp(`src={ *?${namedImport} *?}`, `gm`),
+              `src={${namedImport}_${importId}}`
+            )
+        })
+      }
+    } catch (err) {
+      api.reporter.error(
+        `Error when creating namespaced imports in gatsby-plugin-mdx`
+      )
+    }
+  }
+
   if (options.lessBabel) {
-    await onCreateNodeLessBabel(content, api, options)
+    await onCreateNodeLessBabel(fixedContent, api, options)
   } else {
-    await onCreateNodeExtraBabel(content, api, options)
+    await onCreateNodeExtraBabel(fixedContent, api, options)
   }
 }