[middlewares via Edge Functions] fetch is not complete, runtime is not addressable

What version of Next.js are you using?

12.0.4-canary.15

What version of Node.js are you using?

v14.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Cloudflare Workers, which powers Edge Functions, has a caveat in the fetch implementation. The referrerPolicy, credentials, and mode options cannot be used. When used the code will throw/reject.

This is fine in Cloudflare Workers since it’s easy to detect that javascript runtime using something along the lines of typeof WebSocketPair === 'function', but it is not fine for Edge Functions since that global context (e.g. WebSocketPair) is not reachable.

Without a way to detect Edge Function runtime it is not possible to write universal code that uses these options in the browser but omits using them in Edge Functions.

Expected Behavior

It is possible to uniquely detect the runtime so that workarounds in universal libraries can be made to target said runtime.

If there’s a global that is unique to Edge Functions / Middlewares, we can use that, if not, add something fixed to process.env instead?

To Reproduce

This works in next dev but fails deployed to vercel.com. If a universal library does this, it needs a way to detect Edge Functions are used as a runtime to omit adding the referrerPolicy, credentials, and mode options.

export async function middleware(req, ev) {
  let fetchFailed = false;
  try {
    await fetch(new URL('https://www.googleapis.com/oauth2/v3/certs'), {
      redirect: 'manual',
      method: 'GET',
      referrerPolicy: 'no-referrer',
      credentials: 'omit',
      mode: 'cors',
    })
  } catch (err)  {
    fetchFailed = err.stack
  }

  return new Response(JSON.stringify({
    fetchFailed,
  }), { status: 200 });
}

[panva]

EdgeRuntime runtime global can now be used to identify that Edge Functions or dev/local is used. But in order to work around the unique quirks of cloudflare workers behind Edge Fucntions production deployment, discerning between the two (prod / rest) is still left to be surfaced.

To demonstrate the issue again, run the following in edge-runtime

await fetch(new URL('https://www.googleapis.com/oauth2/v3/certs'), {
      redirect: 'manual',
      method: 'GET',
      referrerPolicy: 'no-referrer',
      credentials: 'omit',
      mode: 'cors',
    }).then((response) => response.json())

It will work.

But in production, it won’t, because CF workers fetch implementation is not the same as node’s / the polyfill used in edge-runtime. The Workers runtime is ever changing and unique, that’s why knowing if the code is in dev or prod is important for me as a library developer knowing the unique quirks of CF workers that may be encountered.

The issue with fetch is just one of probably many. Another one that surely is unique to CF Workers is how inverting control flow is handled / not allowed in prod.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.