fix(remix): Add nativeFetch support for accessing request headers (#12479)

Remix v2.9+ now supports `undici` native fetch.
`normalizeRemixRequest()` would throw an error when processing
`headers`. This PR uses the standard `Object.fromEntries()` to convert
`Headers` into an object.

Author: kiliman

packages/remix/src/utils/web-fetch.ts

@@ -150,8 +150,7 @@ export const normalizeRemixRequest = (request: RemixRequest): Record<string, any
     query: parsedURL.query,
     href: parsedURL.href,
     method: request.method,
-    // @ts-expect-error - not sure what this supposed to do
-    headers: headers[Symbol.for('nodejs.util.inspect.custom')](),
+    headers: objectFromHeaders(headers),
     insecureHTTPParser: request.insecureHTTPParser,
     agent,
 
@@ -164,3 +163,35 @@ export const normalizeRemixRequest = (request: RemixRequest): Record<string, any
 
   return requestOptions;
 };
+
+// This function is a `polyfill` for Object.fromEntries()
+function objectFromHeaders(headers: Headers): Record<string, string> {
+  const result: Record<string, string> = {};
+  let iterator: IterableIterator<[string, string]>;
+
+  if (hasIterator(headers)) {
+    iterator = getIterator(headers) as IterableIterator<[string, string]>;
+  } else {
+    return {};
+  }
+
+  for (const [key, value] of iterator) {
+    result[key] = value;
+  }
+  return result;
+}
+
+type IterableType<T> = {
+  [Symbol.iterator]: () => Iterator<T>;
+};
+
+function hasIterator<T>(obj: T): obj is T & IterableType<unknown> {
+  return obj !== null && typeof (obj as IterableType<unknown>)[Symbol.iterator] === 'function';
+}
+
+function getIterator<T>(obj: T): Iterator<unknown> {
+  if (hasIterator(obj)) {
+    return (obj as IterableType<unknown>)[Symbol.iterator]();
+  }
+  throw new Error('Object does not have an iterator');
+}

packages/remix/test/utils/normalizeRemixRequest.test.ts

@@ -0,0 +1,100 @@
+import type { RemixRequest } from '../../src/utils/vendor/types';
+import { normalizeRemixRequest } from '../../src/utils/web-fetch';
+
+class Headers {
+  private _headers: Record<string, string> = {};
+
+  constructor(headers?: Iterable<[string, string]>) {
+    if (headers) {
+      for (const [key, value] of headers) {
+        this.set(key, value);
+      }
+    }
+  }
+  static fromEntries(entries: Iterable<[string, string]>): Headers {
+    return new Headers(entries);
+  }
+  entries(): IterableIterator<[string, string]> {
+    return Object.entries(this._headers)[Symbol.iterator]();
+  }
+
+  [Symbol.iterator](): IterableIterator<[string, string]> {
+    return this.entries();
+  }
+
+  get(key: string): string | null {
+    return this._headers[key] ?? null;
+  }
+
+  has(key: string): boolean {
+    return this._headers[key] !== undefined;
+  }
+
+  set(key: string, value: string): void {
+    this._headers[key] = value;
+  }
+}
+
+class Request {
+  private _url: string;
+  private _options: { method: string; body?: any; headers: Headers };
+
+  constructor(url: string, options: { method: string; body?: any; headers: Headers }) {
+    this._url = url;
+    this._options = options;
+  }
+
+  get method() {
+    return this._options.method;
+  }
+
+  get url() {
+    return this._url;
+  }
+
+  get headers() {
+    return this._options.headers;
+  }
+
+  get body() {
+    return this._options.body;
+  }
+}
+
+describe('normalizeRemixRequest', () => {
+  it('should normalize remix web-fetch request', () => {
+    const headers = new Headers();
+    headers.set('Accept', 'text/html,application/json');
+    headers.set('Cookie', 'name=value');
+    const request = new Request('https://example.com/api/json?id=123', {
+      method: 'GET',
+      headers: headers as any,
+    });
+
+    const expected = {
+      agent: undefined,
+      hash: '',
+      headers: {
+        Accept: 'text/html,application/json',
+        Connection: 'close',
+        Cookie: 'name=value',
+        'User-Agent': 'node-fetch',
+      },
+      hostname: 'example.com',
+      href: 'https://example.com/api/json?id=123',
+      insecureHTTPParser: undefined,
+      ip: null,
+      method: 'GET',
+      originalUrl: 'https://example.com/api/json?id=123',
+      path: '/api/json?id=123',
+      pathname: '/api/json',
+      port: '',
+      protocol: 'https:',
+      query: undefined,
+      search: '?id=123',
+    };
+
+    const normalizedRequest = normalizeRemixRequest(request as unknown as RemixRequest);
+    expect(normalizedRequest).toEqual(expected);
+  });
+});