Failed to execute 'fetch' on 'Window': Illegal invocation

[Lonli-Lokli]

Failed to execute 'fetch' on 'Window': Illegal invocation error happens when cross-fetch is passed as class field

Playground

Note: it will work with "cross-fetch": "3.0.4"

import { useEffect, useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import crossFetch from 'cross-fetch';
import './App.css';

type Fetcher = typeof crossFetch;

class MyFetcher {
  constructor(protected fetcher: Fetcher) {}

  run() {
    return this.fetcher('https://api.github.com/users/lquixada');
  }
}

const fetcher = new MyFetcher(crossFetch);

function App() {
  const [apiCall, setApiCall] = useState('');

  useEffect(() => {
    // React advises to declare the async function directly inside useEffect
    async function getUser() {
      try {
        const res = await fetcher.run();

        if (res.status >= 400) {
          setApiCall('Bad response from server');
          return;
        }

        const user = await res.json();
        setApiCall(JSON.stringify(user));
      } catch (err: any) {
        setApiCall('FAILED: ' + err.message);
      }
    }

    if (!apiCall) {
      getUser();
    }
  }, []);

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <p>API call results: {apiCall}</p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;