From 6a1006f1cc55ae8930c0fbf72178a53df2f1e240 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Fri, 2 Jul 2021 04:27:32 -0700
Subject: [PATCH] Don't emit duplicate image files (#26843)

fixes #26607

This change makes it so the image loader plugin only emits a file while processing an image import for the client. The final generated image URL was already the same in SSR and CSR anyway, so this change doesn't have any functional impact.

I also changed the name of the static page in the image component tests, since it was causing some conflicts with the static assets folder.
---
 packages/next/build/webpack-config.ts                     | 3 +++
 packages/next/build/webpack/loaders/next-image-loader.js  | 5 ++++-
 .../default/pages/{static.js => static-img.js}            | 0
 .../image-component/default/test/index.test.js            | 8 ++++++++
 .../image-component/default/test/static.test.js           | 6 +++---
 5 files changed, 18 insertions(+), 4 deletions(-)
 rename test/integration/image-component/default/pages/{static.js => static-img.js} (100%)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 4fc297eb7b087..f588b478adb31 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1032,6 +1032,9 @@ export default async function getBaseWebpackConfig(
                 loader: 'next-image-loader',
                 issuer: { not: regexLikeCss },
                 dependency: { not: ['url'] },
+                options: {
+                  isServer,
+                },
               },
             ]
           : []),
diff --git a/packages/next/build/webpack/loaders/next-image-loader.js b/packages/next/build/webpack/loaders/next-image-loader.js
index 49497f88cabb1..67538cc2ff961 100644
--- a/packages/next/build/webpack/loaders/next-image-loader.js
+++ b/packages/next/build/webpack/loaders/next-image-loader.js
@@ -7,6 +7,7 @@ const BLUR_QUALITY = 70
 const VALID_BLUR_EXT = ['jpeg', 'png', 'webp']
 
 async function nextImageLoader(content) {
+  const isServer = loaderUtils.getOptions(this).isServer
   const context = this.rootContext
   const opts = { context, content }
   const interpolatedName = loaderUtils.interpolateName(
@@ -46,7 +47,9 @@ async function nextImageLoader(content) {
     blurDataURL,
   })
 
-  this.emitFile(interpolatedName, content, null)
+  if (!isServer) {
+    this.emitFile(interpolatedName, content, null)
+  }
 
   return `${'export default '} ${stringifiedData};`
 }
diff --git a/test/integration/image-component/default/pages/static.js b/test/integration/image-component/default/pages/static-img.js
similarity index 100%
rename from test/integration/image-component/default/pages/static.js
rename to test/integration/image-component/default/pages/static-img.js
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 540383a260608..b7d2bb98f8198 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -15,6 +15,7 @@ import {
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
+import { existsSync } from 'fs'
 
 jest.setTimeout(1000 * 80)
 
@@ -555,6 +556,13 @@ function runTests(mode) {
         /Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm
       )
     })
+  } else {
+    //server-only tests
+    it('should not create an image folder in server/chunks', async () => {
+      expect(
+        existsSync(join(appDir, '.next/server/chunks/static/image'))
+      ).toBeFalsy()
+    })
   }
 
   it('should correctly ignore prose styles', async () => {
diff --git a/test/integration/image-component/default/test/static.test.js b/test/integration/image-component/default/test/static.test.js
index 4649c0f9c1549..abda89d8358f5 100644
--- a/test/integration/image-component/default/test/static.test.js
+++ b/test/integration/image-component/default/test/static.test.js
@@ -18,7 +18,7 @@ let app
 let browser
 let html
 
-const indexPage = new File(join(appDir, 'pages/static.js'))
+const indexPage = new File(join(appDir, 'pages/static-img.js'))
 
 const runTests = () => {
   it('Should allow an image with a static src to omit height and width', async () => {
@@ -97,8 +97,8 @@ describe('Static Image Component Tests', () => {
     await nextBuild(appDir)
     appPort = await findPort()
     app = await nextStart(appDir, appPort)
-    html = await renderViaHTTP(appPort, '/static')
-    browser = await webdriver(appPort, '/static')
+    html = await renderViaHTTP(appPort, '/static-img')
+    browser = await webdriver(appPort, '/static-img')
   })
   afterAll(() => {
     killApp(app)