TypeError: e.on is not a function

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

12.18

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Google Cloud

Describe the Bug

If there is an external rewrite for the static files, the image component throws this error while accessing the files:

TypeError: e.on is not a function
    at Array.stream (packages/next/dist/compiled/http-proxy/index.js:1:15064)
    at ProxyServer.<anonymous> (packages/next/dist/compiled/http-proxy/index.js:1:12072)
    at Object.fn (packages/next/dist/next-server/server/next-server.js:55:278)
    at Router.execute (packages/next/dist/next-server/server/router.js:23:83)
    at async DevServer.run (packages/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (packages/next/dist/next-server/server/next-server.js:34:1081)
    at async imageOptimizer (packages/next/dist/next-server/server/image-optimizer.js:3:4400)
    at async Router.execute (packages/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (packages/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (packages/next/dist/next-server/server/next-server.js:34:1081)

Expected Behavior

It should serve the static file

To Reproduce

To reproduce the issue within the next.js app, change the integration test to serve a static file through rewrite.

Change test/integration/image-optimizer/next.config.js to:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/:base(next-js)/:rest*',
        destination: `https://assets.vercel.com/image/upload/v1538361091/repositories/:base/:rest*`,
      },
    ]
  },
  /* replaceme */
}

Now try to access this image. It will throw e.on is not a function. For example add this test inside test/integration/image-optimizer/test/index.test.js:

it('should return response when image is served from an external rewrite', async () => {
    const query = { url: '/next-js/next-js-bg.png', w: 3840, q: 75 }
    const opts = { headers: { accept: 'image/webp' } }
    const res = await fetchViaHTTP(appPort, '/_next/image', query, opts)
    expect(res.status).toBe(200)
    expect(res.headers.get('Content-Type')).toBe('image/webp')
  })

vercel / next.js

TypeError: e.on is not a function #20909