Types of property 'headers' are incompatible (with new 3.1.0)

[Jauminha]

(First of all thanks for this amazing package!)

We are using cross-fetch to use the same client calls to our APIs from other APIs and any running application.
For our infrastructural needs, we created a small customFetch function on top of the fetch function so we could change the URL if a cloud parameter is passed or not:

export const customFetch = (input: RequestInfo, init: RequestInit, cloud?: CloudSubdomain | string): Promise<Response> => {
    let url = "";
    if (cloud) {
        url += createCloudUrl(cloud);
    }
    url += input;
    return fetch(url, init);
};

After updating to version 3.1.0 our code started to throw the following error:

Type 'Promise<import("/home/user/development/node_modules/cross-fetch/lib.fetch").Response>' is not assignable to type 'Promise<Response>'.
  Type 'import("/home/user/development/node_modules/cross-fetch/lib.fetch").Response' is not assignable to type 'Response'.
    Types of property 'headers' are incompatible.
      Type 'Headers' is missing the following properties from type 'Headers': [Symbol.iterator], entries, keys, values

22     return fetch(url, init);

I inspected the types from both node_modules/typescript/lib/lib.dom.d.ts and node_modules/cross-fetch/lib.fetch.d.ts and I see no difference apart from this:

declare var Headers: {
    prototype: Headers;
    new(init?: HeadersInit): Headers;
};

Hope you can shed some light on this.
Thanks for your time!

[jstewmon]

The problem is that we're missing an augmentation from lib.dom.iterable.d.ts:

interface Headers {
    [Symbol.iterator](): IterableIterator<[string, string]>;
    /**
     * Returns an iterator allowing to go through all key/value pairs contained in this object.
     */
    entries(): IterableIterator<[string, string]>;
    /**
     * Returns an iterator allowing to go through all keys of the key/value pairs contained in this object.
     */
    keys(): IterableIterator<string>;
    /**
     * Returns an iterator allowing to go through all values of the key/value pairs contained in this object.
     */
    values(): IterableIterator<string>;
}

I think I can fix this by adding a graft for that specific interface and use declaration merging to get the right type definition in the cross-fetch index.d.ts.

[Jauminha]

Awesome! Waiting for the merge 👍

[lquixada]

Fix released on 3.1.2. 👍 thanks everyone!

[ThomWright]

@lquixada This is still happening for me on 3.1.2.

[jstewmon]

🤦 Sorry again - I was trying to quickly think of a way to fix this problem and I failed to really internalize the problem before proposing a solution.

I've got a new approach that I think will really work. I'll open a new PR shortly, including how I've tested it against the code sample in this issue.

[Jauminha]

I guess the issue should be reopened until the fix has been merged? More people will stumble upon this

[lquixada]

@Jauminha yeah, makes sense. I'm still working on this though!

[lquixada]

@Jauminha just released an alpha version. can you try your code with npm install cross-fetch@3.1.3-alpha.4