web3Modal выдает ошибку «окно не определено» при инициализации экземпляра web3Modal

#typescript #ethereum #web3 #dapp

Вопрос:

я использую nextjs reactjs машинопись. Без машинописи работает отлично, но при использовании машинописи я получил эту ошибку. Кстати, я использую useMemo здесь, но я пытался инициализировать его вне функции. В обоих случаях я получил одну и ту же ошибку.

Вот фрагмент кода, который я в настоящее время использую

 const INFURA_ID = process.env.REACT_APP_INFURA_ID;  const initWeb3 = (provider: any) =gt; {  const web3 = new Web3(provider);   web3.eth.extend({  methods: [  {  name: "chainId",  call: "eth_chainId",  outputFormatter: web3.utils.hexToNumber as any,  },  ],  });   return web3; };  export function Web3UtilityProvider() {  const [walletAddress, setWalletAddress] = useState(null);  const { user, authDispatch } = useAuth();   const dAppClient = useMemo(() =gt; new DAppClient({ name: "Beacon Docs" }), []);   const web3Modal = useMemo(() =gt; {  return new Web3Modal({  // network: "mainnet", // optional  cacheProvider: true, // optional  providerOptions: {  walletconnect: {  package: WalletConnectProvider, // required  options: {  infuraId: INFURA_ID,  },  },  // torus: {  // package: Torus,  // },  fortmatic: {  package: Fortmatic,  options: {  key: process.env.REACT_APP_FORTMATIC_KEY,  },  },  authereum: {  package: Authereum,  },  bitski: {  package: Bitski,  options: {  clientId: process.env.REACT_APP_BITSKI_CLIENT_ID,  callbackUrl:  window.location.href   "bitski-callback.html",  },  },  },  });  }, []);   const logoutOfWeb3Modal = useCallback(async () =gt; {  async () =gt; {  web3Modal.clearCachedProvider();  setTimeout(() =gt; {  typeof window !== "undefined" amp;amp; window.location.reload();  }, 1);  };  }, [web3Modal]);   const loadWeb3Modal = useCallback(async () =gt; {  const provider = await web3Modal.connect();   if (!provider?.on) {  return;  }   const web3 = initWeb3(provider);   const accounts = await web3.eth.getAccounts();   provider.on("close", () =gt; {  logoutOfWeb3Modal();  });   provider.on("accountsChanged", async (accounts: any) =gt; {  console.log("accountsChanged", accounts);  if (!accounts || !accounts.length) {  return;  }  });  }, []);   return (  lt;Web3Context.Provider  value={{  logoutOfWeb3Modal,  loadWeb3Modal  }}  gt;  {children}  lt;/Web3Context.Providergt;  ); }  

ошибка png

Ответ №1:

На самом деле эта ошибка не была связана с js или ts; она работала с приложением reactjs из-за CSR, но в моем случае я использовал nextjs, и из-за SSR этот объект окна не был определен. Итак, чтобы решить эту ошибку, я просто использовал запасной вариант (т. е. эффект использования).

Комментарии:

1. Спасибо, это было полезно!