fix: edge runtime with next/legacy/image (#50343)

- Fixes #50307
- Related to #45601

fix #50307
fix NEXT-1237

packages/next/src/client/legacy/image.tsx

@@ -148,7 +148,11 @@ function defaultLoader({
         )
       }
 
-      if (process.env.NODE_ENV !== 'test') {
+      if (
+        process.env.NODE_ENV !== 'test' &&
+        // micromatch isn't compatible with edge runtime
+        process.env.NEXT_RUNTIME !== 'edge'
+      ) {
         // We use dynamic require because this should only error in development
         const { hasMatch } = require('../../shared/lib/match-remote-pattern')
         if (!hasMatch(config.domains, config.remotePatterns, parsedSrc)) {

test/e2e/app-dir/next-image/app/legacy-edge-runtime/layout.js

@@ -0,0 +1,14 @@
+import Image from 'next/legacy/image'
+import testPng from '../../images/test.png'
+
+export const runtime = 'experimental-edge'
+
+export default function LegacyEdgeLayout({ children }) {
+  return (
+    <>
+      <h2>app-legacy-edge-layout</h2>
+      <Image id="app-legacy-edge-layout" src={testPng} loading="eager" />
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/next-image/app/legacy-edge-runtime/page.js

@@ -0,0 +1,11 @@
+import Image from 'next/legacy/image'
+import testPng from '../../images/test.png'
+
+export default function LegacyEdgePage() {
+  return (
+    <>
+      <h2>app-legacy-edge-page</h2>
+      <Image id="app-legacy-edge-page" src={testPng} loading="eager" />
+    </>
+  )
+}

test/e2e/app-dir/next-image/app/legacy/layout.js

@@ -0,0 +1,12 @@
+import Image from 'next/legacy/image'
+import testPng from '../../images/test.png'
+
+export default function LegacyLayout({ children }) {
+  return (
+    <>
+      <h2>app-legacy-layout</h2>
+      <Image id="app-legacy-layout" src={testPng} loading="eager" />
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/next-image/app/legacy/page.js

@@ -0,0 +1,11 @@
+import Image from 'next/legacy/image'
+import testPng from '../../images/test.png'
+
+export default function LegacyPage() {
+  return (
+    <>
+      <h2>app-legacy-page</h2>
+      <Image id="app-legacy-page" src={testPng} loading="eager" />
+    </>
+  )
+}

test/e2e/app-dir/next-image/next-image.test.ts

@@ -267,6 +267,30 @@ createNextDescribe(
         expect(res4.status).toBe(200)
         expect(res4.headers.get('content-type')).toBe('image/jpeg')
       })
+
+      it('should render legacy images under /legacy route', async () => {
+        const $ = await next.render$('/legacy')
+
+        const res2 = await next.fetch($('#app-legacy-layout').attr('src'))
+        expect(res2.status).toBe(200)
+        expect(res2.headers.get('content-type')).toBe('image/png')
+
+        const res3 = await next.fetch($('#app-legacy-page').attr('src'))
+        expect(res3.status).toBe(200)
+        expect(res3.headers.get('content-type')).toBe('image/png')
+      })
+
+      it('should render legacy images in edge runtime on /legacy-edge-runtime route', async () => {
+        const $ = await next.render$('/legacy-edge-runtime')
+
+        const res2 = await next.fetch($('#app-legacy-edge-layout').attr('src'))
+        expect(res2.status).toBe(200)
+        expect(res2.headers.get('content-type')).toBe('image/png')
+
+        const res3 = await next.fetch($('#app-legacy-edge-page').attr('src'))
+        expect(res3.status).toBe(200)
+        expect(res3.headers.get('content-type')).toBe('image/png')
+      })
     })
   }
 )