From ddf6bdf8c392290aa12b8b0185684c99007914fd Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 2 Jun 2023 12:55:24 +0200
Subject: [PATCH 1/2] Fix image loader file emission path for edge runtime

---
 packages/next/src/build/webpack-config.ts     |  2 +-
 .../loaders/next-image-loader/index.ts        | 19 +++++++++++++------
 .../next-image-new/default/pages/edge.js      | 16 ++++++++++++++++
 .../next-image-new/default/test/index.test.ts | 13 +++++++++++--
 4 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 test/integration/next-image-new/default/pages/edge.js

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 33a2f450e39f..1766f68cbcd5 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -2124,8 +2124,8 @@ export default async function getBaseWebpackConfig(
                   not: [new RegExp(WEBPACK_RESOURCE_QUERIES.metadata)],
                 },
                 options: {
-                  isServer: isNodeServer || isEdgeServer,
                   isDev: dev,
+                  compilerType,
                   basePath: config.basePath,
                   assetPrefix: config.assetPrefix,
                 },
diff --git a/packages/next/src/build/webpack/loaders/next-image-loader/index.ts b/packages/next/src/build/webpack/loaders/next-image-loader/index.ts
index 2f731407a7f8..bc663535aee0 100644
--- a/packages/next/src/build/webpack/loaders/next-image-loader/index.ts
+++ b/packages/next/src/build/webpack/loaders/next-image-loader/index.ts
@@ -1,9 +1,12 @@
+import type { CompilerNameValues } from '../../../../shared/lib/constants'
+
+import path from 'path'
 import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { getImageSize } from '../../../../server/image-optimizer'
 import { getBlurImage } from './blur'
 
 interface Options {
-  isServer: boolean
+  compilerType: CompilerNameValues
   isDev: boolean
   assetPrefix: string
   basePath: string
@@ -13,7 +16,7 @@ function nextImageLoader(this: any, content: Buffer) {
   const imageLoaderSpan = this.currentTraceSpan.traceChild('next-image-loader')
   return imageLoaderSpan.traceAsyncFn(async () => {
     const options: Options = this.getOptions()
-    const { isServer, isDev, assetPrefix, basePath } = options
+    const { compilerType, isDev, assetPrefix, basePath } = options
     const context = this.rootContext
 
     const opts = { context, content }
@@ -63,14 +66,18 @@ function nextImageLoader(this: any, content: Buffer) {
         })
       )
 
-    if (isServer) {
+    if (compilerType === 'client') {
+      this.emitFile(interpolatedName, content, null)
+    } else {
       this.emitFile(
-        `../${isDev ? '' : '../'}${interpolatedName}`,
+        path.join(
+          '..',
+          isDev || compilerType === 'edge-server' ? '' : '..',
+          interpolatedName
+        ),
         content,
         null
       )
-    } else {
-      this.emitFile(interpolatedName, content, null)
     }
 
     return `export default ${stringifiedData};`
diff --git a/test/integration/next-image-new/default/pages/edge.js b/test/integration/next-image-new/default/pages/edge.js
new file mode 100644
index 000000000000..da912f5f448e
--- /dev/null
+++ b/test/integration/next-image-new/default/pages/edge.js
@@ -0,0 +1,16 @@
+import Image from 'next/image'
+
+import profilePic from '../public/small.jpg'
+
+export const runtime = 'experimental-edge'
+
+function About() {
+  return (
+    <>
+      <h1>edge</h1>
+      <Image src={profilePic} alt="Picture of the author in edge runtime" />
+    </>
+  )
+}
+
+export default About
diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
index b16f653a5c36..23f65a2dbfe3 100644
--- a/test/integration/next-image-new/default/test/index.test.ts
+++ b/test/integration/next-image-new/default/test/index.test.ts
@@ -17,7 +17,8 @@ import {
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
-import { existsSync } from 'fs'
+import fs from 'fs/promises'
+import { pathExists } from 'fs-extra'
 
 const appDir = join(__dirname, '../')
 
@@ -1048,10 +1049,11 @@ function runTests(mode) {
       expect(warnings.length).toBe(1)
     })
   } else {
+    pathExists
     //server-only tests
     it('should not create an image folder in server/chunks', async () => {
       expect(
-        existsSync(join(appDir, '.next/server/chunks/static/media'))
+        await pathExists(join(appDir, '.next/server/chunks/static/media'))
       ).toBeFalsy()
     })
     it('should render as unoptimized with missing src prop', async () => {
@@ -1300,6 +1302,13 @@ function runTests(mode) {
       const computedHeight = await getComputed(browser, id, 'height')
       expect(getRatio(computedHeight, computedWidth)).toBeCloseTo(0.75, 1)
     })
+
+    it('should create images folder in static/media for edge runtime', async () => {
+      const files = await fs.readdir(join(appDir, '.next/static/media'))
+      expect(files).toEqual(
+        expect.arrayContaining([expect.stringMatching(/small\.\w+\.jpg/)])
+      )
+    })
   }
 
   it('should have blurry placeholder when enabled', async () => {

From d51be4bdb5facd658c33ae8381bbce4934c97037 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 2 Jun 2023 13:02:21 +0200
Subject: [PATCH 2/2] rm

---
 test/integration/next-image-new/default/test/index.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
index 23f65a2dbfe3..a21d6af024f8 100644
--- a/test/integration/next-image-new/default/test/index.test.ts
+++ b/test/integration/next-image-new/default/test/index.test.ts
@@ -1049,7 +1049,6 @@ function runTests(mode) {
       expect(warnings.length).toBe(1)
     })
   } else {
-    pathExists
     //server-only tests
     it('should not create an image folder in server/chunks', async () => {
       expect(