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

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)
-        }
       }
       if (Module['instantiateWasm']) {
         try {

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)
-        }
       }
       if (Module['instantiateWasm']) {
         try {

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)
-        }
       }
       if (Module['instantiateWasm']) {
         try {

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)
-        }
       }
       if (Module['instantiateWasm']) {
         try {

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)
-        }
       }
       if (Module['instantiateWasm']) {
         try {

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)
-        }
       }
       if (Module['instantiateWasm']) {
         try {

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')
   })

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 <NextImage src={src} />
+  return <NextImage id="myimg" src={src} />
 }
 
 export default Page

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() {
       <h1>Example Image Usage</h1>
       <Image src="/test.jpg" width={200} height={200} />
       <hr />
-      <FutureImage src="/test.png" width={200} height={200} />
+      <FutureImage src={png} />
     </>
   )
 }