fix(next/image): import error preload is not exported from `react-d…

…om` (#54688)

- Fixes #54416
- Related to #47659 

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

packages/next/src/client/image-component.tsx

@@ -10,7 +10,7 @@ import React, {
   forwardRef,
   version,
 } from 'react'
-import { preload } from 'react-dom'
+import ReactDOM from 'react-dom'
 import Head from '../shared/lib/head'
 import { getImgProps } from '../shared/lib/get-img-props'
 import type {
@@ -320,9 +320,9 @@ function ImagePreload({
     ...getDynamicProps(imgAttributes.fetchPriority),
   }
 
-  if (isAppRouter && preload) {
+  if (isAppRouter && ReactDOM.preload) {
     // See https://github.com/facebook/react/pull/26940
-    preload(
+    ReactDOM.preload(
       imgAttributes.src,
       // @ts-expect-error TODO: upgrade to `@types/react-dom@18.3.x`
       opts

test/integration/next-image-new/loader-config-edge-runtime/pages/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import Image from 'next/image'
 
+export const config = { runtime: 'experimental-edge' }
+
 function loader({ src, width, quality }) {
   return `${src}?wid=${width}&qual=${quality || 35}`
 }

test/integration/next-image-new/middleware/middleware.js

@@ -0,0 +1,6 @@
+import Image from 'next/image'
+
+export async function middleware(request) {
+  // reference Image so it's not tree shaken / DCE
+  console.log(`Has image: ${Boolean(Image)}`)
+}

test/integration/next-image-new/middleware/pages/index.js

@@ -0,0 +1,15 @@
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <>
+      <h1>Its Works</h1>
+      <Image
+        alt="empty"
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width={400}
+        height={400}
+      />
+    </>
+  )
+}

test/integration/next-image-new/middleware/test/index.test.ts

@@ -0,0 +1,40 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { check, findPort, killApp, launchApp } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+const appDir = join(__dirname, '../')
+let appPort: number
+let app: Awaited<ReturnType<typeof launchApp>>
+let output = ''
+
+describe('Image with middleware in edge func', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort, {
+        onStdout: (s) => {
+          output += s
+        },
+        onStderr: (s) => {
+          output += s
+        },
+      })
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should not error', async () => {
+      /**
+        - wait compiling /middleware (client and server)...
+        - warn ../../../../packages/next/dist/esm/client/image-component.js
+        Attempted import error: 'preload' is not exported from 'react-dom' (imported as 'preload').
+       */
+      await webdriver(appPort, '/')
+      await check(() => output, /compiled client and server successfully/)
+      expect(output).not.toContain(`'preload' is not exported from 'react-dom'`)
+    })
+  })
+})