Type 'Agent | ((parsedUrl: URL) => Agent) | undefined' is not assignable to type 'Agent | undefined'

Question

I'm receiving this error during a build command of next.js commerce.

Type error: Argument of type '{ method: string; headers: { 'Content-Type': string; } | { 'Content-Type': string; } | { 'Content-Type': string; length: number; toString(): string; toLocaleString(): string; pop(): string[] | undefined; ... 29 more ...; [Symbol.unscopables](): { ...; }; } | { ...; }; ... 7 more ...; timeout?: number | undefined; }' is not assignable to parameter of type 'FetchOptions'.
  Type '{ method: string; headers: { 'Content-Type': string; } | { 'Content-Type': string; } | { 'Content-Type': string; length: number; toString(): string; toLocaleString(): string; pop(): string[] | undefined; ... 29 more ...; [Symbol.unscopables](): { ...; }; } | { ...; }; ... 7 more ...; timeout?: number | undefined; }' is not assignable to type '{ agent?: Agent | undefined; retry?: RetryOptions | undefined; }'.
    Types of property 'agent' are incompatible.
      Type 'Agent | ((parsedUrl: URL) => Agent) | undefined' is not assignable to type 'Agent | undefined'.

   8 |   async (query: string, { variables, preview } = {}, fetchOptions) => {
   9 |     const config = getConfig()
> 10 |     const res = await fetch(config.commerceUrl, {
     |                                                 ^
  11 |       ...fetchOptions,
  12 |       method: 'POST',
  13 |       headers: {

The file its complaining about is pretty simple:

import { FetcherError } from '@commerce/utils/errors'
import type { GraphQLFetcher } from '@commerce/api'
import type { LocalConfig } from '../index'
import fetch from './fetch'

const fetchGraphqlApi: (getConfig: () => LocalConfig) => GraphQLFetcher =
  (getConfig) =>
  async (query: string, { variables, preview } = {}, fetchOptions) => {
    const config = getConfig()
    const res = await fetch(config.commerceUrl, {
      ...fetchOptions,
      method: 'POST',
      headers: {
        ...fetchOptions?.headers,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query,
        variables,
      }),
    })

    const json = await res.json()
    if (json.errors) {
      throw new FetcherError({
        errors: json.errors ?? [{ message: 'Failed to fetch for API' }],
        status: res.status,
      })
    }

    return { data: json.data, res }
  }

export default fetchGraphqlApi

There are very few type definitions in this file but obviously, it's inferring a bunch and I'm really not sure how to go about debugging it. I've updated to the latest version of node npm and typescript.

Do I need to go back and find all the spots where this is called to see where the typing went wrong?

It seems this may be related to some issues with the "https-proxy-agent module since there are some related bugs I've found. https://github.com/TooTallNate/node-https-proxy-agent/issues/27 https://github.com/TooTallNate/node-https-proxy-agent/issues/114

But I don't see how either of those solutions would fix this code.

EDIT: ./fetch.js

import zeitFetch from '@vercel/fetch'
export default zeitFetch()