From f59273d09de829d642435a7888078f77911c058c Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 28 Aug 2023 15:46:30 -0700 Subject: [PATCH 1/3] fix(next/image): import error `preload` is not exported from `react-dom` --- packages/next/src/client/image-component.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/next/src/client/image-component.tsx b/packages/next/src/client/image-component.tsx index ff9c6d9e1c3e..3f2183c004b1 100644 --- a/packages/next/src/client/image-component.tsx +++ b/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 From f1af50ba820af4bde2e092a87ce874b7aa86e49a Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 28 Aug 2023 17:13:21 -0700 Subject: [PATCH 2/3] add test --- .../loader-config-edge-runtime/pages/index.js | 2 + .../next-image-new/middleware/middleware.js | 6 +++ .../next-image-new/middleware/pages/index.js | 15 +++++++ .../middleware/test/index.test.ts | 40 +++++++++++++++++++ 4 files changed, 63 insertions(+) create mode 100644 test/integration/next-image-new/middleware/middleware.js create mode 100644 test/integration/next-image-new/middleware/pages/index.js create mode 100644 test/integration/next-image-new/middleware/test/index.test.ts diff --git a/test/integration/next-image-new/loader-config-edge-runtime/pages/index.js b/test/integration/next-image-new/loader-config-edge-runtime/pages/index.js index e246516278ae..d850c931de1a 100644 --- a/test/integration/next-image-new/loader-config-edge-runtime/pages/index.js +++ b/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}` } diff --git a/test/integration/next-image-new/middleware/middleware.js b/test/integration/next-image-new/middleware/middleware.js new file mode 100644 index 000000000000..b2fb6b8bf8ff --- /dev/null +++ b/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)}`) +} diff --git a/test/integration/next-image-new/middleware/pages/index.js b/test/integration/next-image-new/middleware/pages/index.js new file mode 100644 index 000000000000..44d9dad79819 --- /dev/null +++ b/test/integration/next-image-new/middleware/pages/index.js @@ -0,0 +1,15 @@ +import Image from 'next/image' + +export default function Page() { + return ( + <> +

Its Works

+ empty + + ) +} diff --git a/test/integration/next-image-new/middleware/test/index.test.ts b/test/integration/next-image-new/middleware/test/index.test.ts new file mode 100644 index 000000000000..01ad2e2e7b69 --- /dev/null +++ b/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> +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: () => { + 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'`) + }) + }) +}) From c6c306a73e540b514c76c9b2e2918b9b8ff415a8 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Mon, 28 Aug 2023 17:16:34 -0700 Subject: [PATCH 3/3] Apply suggestions from code review --- test/integration/next-image-new/middleware/test/index.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/integration/next-image-new/middleware/test/index.test.ts b/test/integration/next-image-new/middleware/test/index.test.ts index 01ad2e2e7b69..80aaf7fa61a1 100644 --- a/test/integration/next-image-new/middleware/test/index.test.ts +++ b/test/integration/next-image-new/middleware/test/index.test.ts @@ -17,7 +17,7 @@ describe('Image with middleware in edge func', () => { onStdout: (s) => { output += s }, - onStderr: () => { + onStderr: (s) => { output += s }, })