Fix incorrect _document.js error when disableStaticImages: true (#…

…30768)

Fixes #30600

errors/custom-document-image-import.md

@@ -28,8 +28,19 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+If your application is not using image imports with `next/image`, you can disable the built-in loader with the following next.config.js:
+
+```js
+module.exports = {
+  images: {
+    disableStaticImages: true,
+  },
+}
+```
+
 ### Useful Links
 
 - [Custom `Document`](https://nextjs.org/docs/advanced-features/custom-document)
 - [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app)
 - [Static File Serving](https://nextjs.org/docs/basic-features/static-file-serving)
+- [Disable Static Image Imports](https://nextjs.org/docs/api-reference/next/image#disable-static-imports)

packages/next/build/webpack-config.ts

@@ -1682,6 +1682,7 @@ export default async function getBaseWebpackConfig(
     productionBrowserSourceMaps: config.productionBrowserSourceMaps,
     future: config.future,
     experimental: config.experimental,
+    disableStaticImages: config.images.disableStaticImages,
   })
 
   // @ts-ignore Cache exists

packages/next/build/webpack/config/index.ts

@@ -19,6 +19,7 @@ export async function build(
     productionBrowserSourceMaps,
     future,
     experimental,
+    disableStaticImages,
   }: {
     rootDirectory: string
     customAppFile: RegExp
@@ -31,6 +32,7 @@ export async function build(
     productionBrowserSourceMaps: boolean
     future: NextConfigComplete['future']
     experimental: NextConfigComplete['experimental']
+    disableStaticImages: NextConfigComplete['disableStaticImages']
   }
 ): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
@@ -53,6 +55,10 @@ export async function build(
     experimental,
   }
 
-  const fn = pipe(base(ctx), css(ctx), images(ctx))
+  let fns = [base(ctx), css(ctx)]
+  if (!disableStaticImages) {
+    fns.push(images(ctx))
+  }
+  const fn = pipe(...fns)
   return fn(config)
 }

test/integration/invalid-document-image-import/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  /* replaceme */
+}

test/integration/invalid-document-image-import/test/index.test.js

@@ -1,12 +1,16 @@
 /* eslint-env jest */
-import { nextBuild } from 'next-test-utils'
+import { nextBuild, File } from 'next-test-utils'
 import { join } from 'path'
 
 jest.setTimeout(1000 * 60 * 2)
 
+const appDir = join(__dirname, '../')
+const nextConfig = new File(join(appDir, 'next.config.js'))
+
 describe('Invalid static image import in _document', () => {
-  it('Should fail to build', async () => {
-    const appDir = join(__dirname, '..')
+  afterAll(() => nextConfig.restore())
+
+  it('Should fail to build when no next.config.js', async () => {
     const { code, stderr } = await nextBuild(appDir, [], {
       stderr: true,
     })
@@ -17,4 +21,24 @@ describe('Invalid static image import in _document', () => {
     )
     expect(stderr).toMatch(/Location:.*pages[\\/]_document\.js/)
   })
+
+  it('Should fail to build when disableStaticImages in next.config.js', async () => {
+    nextConfig.write(`
+      module.exports = {
+        images: {
+          disableStaticImages: true
+        }
+      }
+    `)
+    const { code, stderr } = await nextBuild(appDir, [], {
+      stderr: true,
+    })
+    expect(code).not.toBe(0)
+    expect(stderr).toMatch(
+      /You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file/
+    )
+    expect(stderr).not.toMatch(
+      /Images.*cannot.*be imported within.*pages[\\/]_document\.js/
+    )
+  })
 })