From 3102899f6972225d27fd57a363f28b421bf1d319 Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 20 Jul 2022 12:24:50 -0400 Subject: [PATCH] Fix squoosh image optimization for Node.js 18 (#38833) Starting in Node.js 18, the `fetch` global was made available and that caused the squoosh implementation to assume it was on a web browser and try to fetch the wasm file instead of reading it from the filesystem. This PR deletes the code trying to fetch since we know that squoosh only runs in the Image Optimization API, not the browser. - Fixes #38020 - Enables a test that was disabled in #38460 --- .../server/lib/squoosh/avif/avif_node_dec.js | 36 +------------------ .../server/lib/squoosh/avif/avif_node_enc.js | 36 +------------------ .../lib/squoosh/mozjpeg/mozjpeg_node_dec.js | 36 +------------------ .../lib/squoosh/mozjpeg/mozjpeg_node_enc.js | 36 +------------------ .../server/lib/squoosh/webp/webp_node_dec.js | 36 +------------------ .../server/lib/squoosh/webp/webp_node_enc.js | 36 +------------------ test/e2e/app-dir/rsc-basic.test.ts | 4 +-- .../{page.server.js.bak => page.server.js} | 2 +- .../app/pages/image-import.tsx | 3 +- 9 files changed, 11 insertions(+), 214 deletions(-) rename test/e2e/app-dir/rsc-basic/app/next-api/image/{page.server.js.bak => page.server.js} (79%) diff --git a/packages/next/server/lib/squoosh/avif/avif_node_dec.js b/packages/next/server/lib/squoosh/avif/avif_node_dec.js index e7de0c5a66..0a02d0afb3 100644 --- a/packages/next/server/lib/squoosh/avif/avif_node_dec.js +++ b/packages/next/server/lib/squoosh/avif/avif_node_dec.js @@ -379,22 +379,6 @@ var Module = (function () { } } function getBinaryPromise() { - if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER)) { - if (typeof fetch === 'function') { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }) - .then(function (response) { - if (!response['ok']) { - throw ( - "failed to load wasm binary file at '" + wasmBinaryFile + "'" - ) - } - return response['arrayBuffer']() - }) - .catch(function () { - return getBinary(wasmBinaryFile) - }) - } - } return Promise.resolve().then(function () { return getBinary(wasmBinaryFile) }) @@ -426,25 +410,7 @@ var Module = (function () { }) } function instantiateAsync() { - if ( - !wasmBinary && - typeof WebAssembly.instantiateStreaming === 'function' && - !isDataURI(wasmBinaryFile) && - typeof fetch === 'function' - ) { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then( - function (response) { - var result = WebAssembly.instantiateStreaming(response, info) - return result.then(receiveInstantiationResult, function (reason) { - err('wasm streaming compile failed: ' + reason) - err('falling back to ArrayBuffer instantiation') - return instantiateArrayBuffer(receiveInstantiationResult) - }) - } - ) - } else { - return instantiateArrayBuffer(receiveInstantiationResult) - } + return instantiateArrayBuffer(receiveInstantiationResult) } if (Module['instantiateWasm']) { try { diff --git a/packages/next/server/lib/squoosh/avif/avif_node_enc.js b/packages/next/server/lib/squoosh/avif/avif_node_enc.js index e6b8653347..4007393a4a 100644 --- a/packages/next/server/lib/squoosh/avif/avif_node_enc.js +++ b/packages/next/server/lib/squoosh/avif/avif_node_enc.js @@ -379,22 +379,6 @@ var Module = (function () { } } function getBinaryPromise() { - if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER)) { - if (typeof fetch === 'function') { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }) - .then(function (response) { - if (!response['ok']) { - throw ( - "failed to load wasm binary file at '" + wasmBinaryFile + "'" - ) - } - return response['arrayBuffer']() - }) - .catch(function () { - return getBinary(wasmBinaryFile) - }) - } - } return Promise.resolve().then(function () { return getBinary(wasmBinaryFile) }) @@ -426,25 +410,7 @@ var Module = (function () { }) } function instantiateAsync() { - if ( - !wasmBinary && - typeof WebAssembly.instantiateStreaming === 'function' && - !isDataURI(wasmBinaryFile) && - typeof fetch === 'function' - ) { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then( - function (response) { - var result = WebAssembly.instantiateStreaming(response, info) - return result.then(receiveInstantiationResult, function (reason) { - err('wasm streaming compile failed: ' + reason) - err('falling back to ArrayBuffer instantiation') - return instantiateArrayBuffer(receiveInstantiationResult) - }) - } - ) - } else { - return instantiateArrayBuffer(receiveInstantiationResult) - } + return instantiateArrayBuffer(receiveInstantiationResult) } if (Module['instantiateWasm']) { try { diff --git a/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js b/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js index df7ee11049..b0b76c0f65 100644 --- a/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js +++ b/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js @@ -386,22 +386,6 @@ var Module = (function () { } } function getBinaryPromise() { - if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER)) { - if (typeof fetch === 'function') { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }) - .then(function (response) { - if (!response['ok']) { - throw ( - "failed to load wasm binary file at '" + wasmBinaryFile + "'" - ) - } - return response['arrayBuffer']() - }) - .catch(function () { - return getBinary(wasmBinaryFile) - }) - } - } return Promise.resolve().then(function () { return getBinary(wasmBinaryFile) }) @@ -433,25 +417,7 @@ var Module = (function () { }) } function instantiateAsync() { - if ( - !wasmBinary && - typeof WebAssembly.instantiateStreaming === 'function' && - !isDataURI(wasmBinaryFile) && - typeof fetch === 'function' - ) { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then( - function (response) { - var result = WebAssembly.instantiateStreaming(response, info) - return result.then(receiveInstantiationResult, function (reason) { - err('wasm streaming compile failed: ' + reason) - err('falling back to ArrayBuffer instantiation') - return instantiateArrayBuffer(receiveInstantiationResult) - }) - } - ) - } else { - return instantiateArrayBuffer(receiveInstantiationResult) - } + return instantiateArrayBuffer(receiveInstantiationResult) } if (Module['instantiateWasm']) { try { diff --git a/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_enc.js b/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_enc.js index e3e69cff74..5ced79bc8b 100644 --- a/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_enc.js +++ b/packages/next/server/lib/squoosh/mozjpeg/mozjpeg_node_enc.js @@ -386,22 +386,6 @@ var Module = (function () { } } function getBinaryPromise() { - if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER)) { - if (typeof fetch === 'function') { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }) - .then(function (response) { - if (!response['ok']) { - throw ( - "failed to load wasm binary file at '" + wasmBinaryFile + "'" - ) - } - return response['arrayBuffer']() - }) - .catch(function () { - return getBinary(wasmBinaryFile) - }) - } - } return Promise.resolve().then(function () { return getBinary(wasmBinaryFile) }) @@ -433,25 +417,7 @@ var Module = (function () { }) } function instantiateAsync() { - if ( - !wasmBinary && - typeof WebAssembly.instantiateStreaming === 'function' && - !isDataURI(wasmBinaryFile) && - typeof fetch === 'function' - ) { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then( - function (response) { - var result = WebAssembly.instantiateStreaming(response, info) - return result.then(receiveInstantiationResult, function (reason) { - err('wasm streaming compile failed: ' + reason) - err('falling back to ArrayBuffer instantiation') - return instantiateArrayBuffer(receiveInstantiationResult) - }) - } - ) - } else { - return instantiateArrayBuffer(receiveInstantiationResult) - } + return instantiateArrayBuffer(receiveInstantiationResult) } if (Module['instantiateWasm']) { try { diff --git a/packages/next/server/lib/squoosh/webp/webp_node_dec.js b/packages/next/server/lib/squoosh/webp/webp_node_dec.js index efb4521fff..7cb4ed8af9 100644 --- a/packages/next/server/lib/squoosh/webp/webp_node_dec.js +++ b/packages/next/server/lib/squoosh/webp/webp_node_dec.js @@ -362,22 +362,6 @@ var Module = (function () { } } function getBinaryPromise() { - if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER)) { - if (typeof fetch === 'function') { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }) - .then(function (response) { - if (!response['ok']) { - throw ( - "failed to load wasm binary file at '" + wasmBinaryFile + "'" - ) - } - return response['arrayBuffer']() - }) - .catch(function () { - return getBinary(wasmBinaryFile) - }) - } - } return Promise.resolve().then(function () { return getBinary(wasmBinaryFile) }) @@ -409,25 +393,7 @@ var Module = (function () { }) } function instantiateAsync() { - if ( - !wasmBinary && - typeof WebAssembly.instantiateStreaming === 'function' && - !isDataURI(wasmBinaryFile) && - typeof fetch === 'function' - ) { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then( - function (response) { - var result = WebAssembly.instantiateStreaming(response, info) - return result.then(receiveInstantiationResult, function (reason) { - err('wasm streaming compile failed: ' + reason) - err('falling back to ArrayBuffer instantiation') - return instantiateArrayBuffer(receiveInstantiationResult) - }) - } - ) - } else { - return instantiateArrayBuffer(receiveInstantiationResult) - } + return instantiateArrayBuffer(receiveInstantiationResult) } if (Module['instantiateWasm']) { try { diff --git a/packages/next/server/lib/squoosh/webp/webp_node_enc.js b/packages/next/server/lib/squoosh/webp/webp_node_enc.js index 8e9196b79a..eacaf1b727 100644 --- a/packages/next/server/lib/squoosh/webp/webp_node_enc.js +++ b/packages/next/server/lib/squoosh/webp/webp_node_enc.js @@ -362,22 +362,6 @@ var Module = (function () { } } function getBinaryPromise() { - if (!wasmBinary && (ENVIRONMENT_IS_WEB || ENVIRONMENT_IS_WORKER)) { - if (typeof fetch === 'function') { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }) - .then(function (response) { - if (!response['ok']) { - throw ( - "failed to load wasm binary file at '" + wasmBinaryFile + "'" - ) - } - return response['arrayBuffer']() - }) - .catch(function () { - return getBinary(wasmBinaryFile) - }) - } - } return Promise.resolve().then(function () { return getBinary(wasmBinaryFile) }) @@ -409,25 +393,7 @@ var Module = (function () { }) } function instantiateAsync() { - if ( - !wasmBinary && - typeof WebAssembly.instantiateStreaming === 'function' && - !isDataURI(wasmBinaryFile) && - typeof fetch === 'function' - ) { - return fetch(wasmBinaryFile, { credentials: 'same-origin' }).then( - function (response) { - var result = WebAssembly.instantiateStreaming(response, info) - return result.then(receiveInstantiationResult, function (reason) { - err('wasm streaming compile failed: ' + reason) - err('falling back to ArrayBuffer instantiation') - return instantiateArrayBuffer(receiveInstantiationResult) - }) - } - ) - } else { - return instantiateArrayBuffer(receiveInstantiationResult) - } + return instantiateArrayBuffer(receiveInstantiationResult) } if (Module['instantiateWasm']) { try { diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts index dc48fccfe3..31678811cb 100644 --- a/test/e2e/app-dir/rsc-basic.test.ts +++ b/test/e2e/app-dir/rsc-basic.test.ts @@ -256,9 +256,9 @@ describe('app dir - react server components', () => { expect(manipulated).toBe(undefined) }) - it.skip('should suspense next/image in server components', async () => { + it('should suspense next/image in server components', async () => { const imageHTML = await renderViaHTTP(next.url, '/next-api/image') - const imageTag = getNodeBySelector(imageHTML, 'body > span > span > img') + const imageTag = getNodeBySelector(imageHTML, '#myimg') expect(imageTag.attr('src')).toContain('data:image') }) diff --git a/test/e2e/app-dir/rsc-basic/app/next-api/image/page.server.js.bak b/test/e2e/app-dir/rsc-basic/app/next-api/image/page.server.js similarity index 79% rename from test/e2e/app-dir/rsc-basic/app/next-api/image/page.server.js.bak rename to test/e2e/app-dir/rsc-basic/app/next-api/image/page.server.js index 17da97e953..2a2e459bd9 100644 --- a/test/e2e/app-dir/rsc-basic/app/next-api/image/page.server.js.bak +++ b/test/e2e/app-dir/rsc-basic/app/next-api/image/page.server.js @@ -3,7 +3,7 @@ import src from '../../../public/test.jpg' // Keep arrow function to test rsc loaders const Page = () => { - return + return } export default Page diff --git a/test/production/typescript-basic/app/pages/image-import.tsx b/test/production/typescript-basic/app/pages/image-import.tsx index 709e941367..5fe97473ec 100644 --- a/test/production/typescript-basic/app/pages/image-import.tsx +++ b/test/production/typescript-basic/app/pages/image-import.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' import FutureImage from 'next/future/image' +import png from '../public/test.png' export default function Page() { return ( @@ -7,7 +8,7 @@ export default function Page() {

Example Image Usage

- + ) }