typescript - web3Modal ให้ข้อผิดพลาด "window is not defined" ขณะเริ่มต้นตัวอย่าง web3Modal

ฉันกำลังใช้ Nextjs + Reactjs + Typescript โดยที่ถ้าไม่ใช้ Typescript มันทำงานได้สมบูรณ์ แต่เมื่อใช้ Typescript ฉันได้รับข้อผิดพลาดนี้

โดยวิธีนี้ฉันกำลังใช้ useMemo ที่นี่ แต่ฉันได้ลองเริ่มต้นมันนอกฟังก์ชันแล้ว ในทั้งสองกรณี ฉันได้รับข้อผิดพลาดเดียวกัน

นี่คือโค้ดสั้น ๆ ที่ฉันกำลังใช้อยู่

const INFURA_ID = process.env.REACT_APP_INFURA_ID;

const initWeb3 = (provider: any) => {
  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(() => new DAppClient({ name: "Beacon Docs" }), []);

  const web3Modal = useMemo(() => {
    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 () => {
    async () => {
      web3Modal.clearCachedProvider();
      setTimeout(() => {
        typeof window !== "undefined" && window.location.reload();
      }, 1);
    };
  }, [web3Modal]);

  const loadWeb3Modal = useCallback(async () => {
    const provider = await web3Modal.connect();

    if (!provider?.on) {
      return;
    }

    const web3 = initWeb3(provider);

    const accounts = await web3.eth.getAccounts();

    provider.on("close", () => {
      logoutOfWeb3Modal();
    });

    provider.on("accountsChanged", async (accounts: any) => {
      console.log("accountsChanged", accounts);
      if (!accounts || !accounts.length) {
        return;
      }
    });
  }, []);

  return (
    <Web3Context.Provider
      value={{
       logoutOfWeb3Modal,
       loadWeb3Modal
      }}
    >
      {children}
    </Web3Context.Provider>
  );
}

คำตอบ #1

จริงๆ แล้ว ข้อผิดพลาดนี้ไม่ได้เกี่ยวกับ js หรือ ts; มันเกิดขึ้นกับแอป reactjs เนื่องจาก CSR แต่ในกรณีของฉันฉันใช้ nextjs และเนื่องจาก SSR วัตถุ window จึงไม่ถูกกำหนด ดังนั้นในการแก้ไขข้อผิดพลาดนี้ ฉันจึงใช้ fallback อย่างง่าย (เช่น useEffect)