React中的'Window＆typeof globalThis'类型上不存在'属性'ethereum''错误

Question

I am getting the

Property 'ethereum' does not exist on type 'Window & typeof globalThis'

error in React. This is the line generating the issue:

import { ethers } from 'ethers'

const provider = new ethers.providers.Web3Provider(window.ethereum);

Any idea of what could be happening?

Answer 1

Using any as a type is cheating.

import { MetaMaskInpageProvider } from "@metamask/providers";

declare global {
  interface Window{
    ethereum?:MetaMaskInpageProvider
  }
}

Answer 2

Create the react-app-env.d.ts file in the src folder with the following script:

/// <reference types="react-scripts" />

interface Window {
    ethereum: any
}

Answer 3

In my src/react-app-env.d.ts I am using

/// <reference types="react-scripts" />
import { ExternalProvider } from "@ethersproject/providers";

declare global {
  interface Window {
    ethereum?: ExternalProvider;
  }
}

Notice that @ethersproject/providers is an ethers dependency so you do not need to install it.

Then I also added a src/hooks/useMetaMask.ts file with useMetaMask hook that casts the provider to MetaMask provider type. This can be useful if you need to add MetaMask listeners.

import type { MetaMaskInpageProvider } from "@metamask/providers";

export const useMetaMask = () => {
  const ethereum = global?.window?.ethereum;
  if (!ethereum || !ethereum.isMetaMask) return;
  return ethereum as unknown as MetaMaskInpageProvider;
};