diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 4fc297eb7b..f588b478ad 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 49497f88ca..67538cc2ff 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 540383a260..b7d2bb98f8 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 4649c0f9c1..abda89d835 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)