`Property 'ethereum' does not exist on type 'Window & typeof globalThis'` error in React

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

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 2

Using any as a type is cheating.

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

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