Axios Cannot read properties of undefined

Question

I am trying to build my own staking page for my NFT project. I cloned a repo named gem-farm from github. But I am facing with an issue when I start it at localhost.

index.js?9d03:45 TypeError: Cannot read properties of undefined (reading 'protocol')
    at isURLSameOrigin (isURLSameOrigin.js?3934:57:1)
    at dispatchXhrRequest (xhr.js?b50d:145:1)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js?b50d:15:1)
    at dispatchRequest (dispatchRequest.js?5270:58:1)
    at Axios.request (Axios.js?0a06:108:1)
    at Axios.<computed> [as get] (Axios.js?0a06:129:1)
    at Function.wrap [as get] (bind.js?1d2b:9:1)
    at _callee$ (cluster.ts?b691:26:1)
    at c (blocto-sdk.umd.js?758a:3:1)

I think it is caused by this file since it is the only file using axios Where it imports axios:

import { TOKEN_PROGRAM_ID } from '@solana/spl-token';
import axios from 'axios';
import { programs } from '@metaplex/js';

This is where it uses axios:

async function getNFTMetadata(
  mint: string,
  conn: Connection,
  pubkey?: string
): Promise<INFT | undefined> {
  // console.log('Pulling metadata for:', mint);
  try {
    const metadataPDA = await Metadata.getPDA(mint);
    const onchainMetadata = (await Metadata.load(conn, metadataPDA)).data;
    const externalMetadata = (await axios.get(onchainMetadata.data.uri)).data;
    return {
      pubkey: pubkey ? new PublicKey(pubkey) : undefined,
      mint: new PublicKey(mint),
      onchainMetadata,
      externalMetadata,
    };
  } catch (e) {
    console.log(`failed to pull metadata for token ${mint}`);
  }
}

I tried it on both PC & Macos. I couldn't find any solution. Thanks.