App.js:48 Error connecting wallet: TypeError: Cannot read properties of undefined (reading 'Web3Provider')

Question

import {ethers} from "ethers"
import abi from "./contract/chai.json";
import { useState, useEffect } from "react";
import { ethers } from 'ethers'; // Import ethers instead of individual components
import "./App.css";

function App() {
    const [state, setState] = useState({
        provider: null,
        signer: null,
        contract: null,
    });

    useEffect(() => {
        const connectWallet = async() => {
            const contractAddress = "0x46436dcb1b29b111a00bb61f5475b420ef1104eb";
            const contractABI = abi.abi;
            try {
                const { ethereum } = window;

                if (ethereum) {
                    // Request accounts
                    const accounts = await ethereum.request({
                        method: "eth_requestAccounts",
                    });

                    // Ensure there's at least one account
                    if (accounts.length === 0) {
                        console.error("No accounts found");
                        return;
                    }

                    // Create Web3Provider using window.ethereum
                    const provider = new ethers.providers.Web3Provider(ethereum);
                    const signer = provider.getSigner(); // Get the signer from the provider

                    // Create contract instance
                    const contract = new ethers.Contract(
                        contractAddress,
                        contractABI,
                        signer
                    );

                    setState({ provider, signer, contract });
                } else {
                    console.error("Ethereum object not found. Install MetaMask.");
                }
            } catch (error) {
                console.error("Error connecting wallet:", error);
            }
        };

        connectWallet();
    }, []);

    console.log(state);

    return <div className = "App" > { /* Your App content */ } < /div>;
}

export default App;

Answer 1

You seem to be using ethers.js v6, so you've to migrate the provider accordingly, i.e., you've to replace ethers.providers.Web3Provider with ethers.BrowserProvider.

And, in v6, provider.getSigner() rturn the promise object of the signer, so you've to add await before it, like:

const signer = await provider.getSigner(); // Get the signer from the provider

So, your revised App.js would be:

import {ethers} from "ethers"
import abi from "./contract/chai.json";
import { useState, useEffect } from "react";
import { ethers } from 'ethers'; // Import ethers instead of individual components
import "./App.css";

function App() {
    const [state, setState] = useState({
        provider: null,
        signer: null,
        contract: null,
    });

    useEffect(() => {
        const connectWallet = async() => {
            const contractAddress = "0x46436dcb1b29b111a00bb61f5475b420ef1104eb";
            const contractABI = abi.abi;
            try {
                const { ethereum } = window;

                if (ethereum) {
                    // Request accounts
                    const accounts = await ethereum.request({
                        method: "eth_requestAccounts",
                    });

                    // Ensure there's at least one account
                    if (accounts.length === 0) {
                        console.error("No accounts found");
                        return;
                    }

                    // Create BrowserProvider using window.ethereum
                    const provider = new ethers.BrowserProvider(ethereum);
                    const signer = await provider.getSigner(); // Get the signer from the provider

                    // Create contract instance
                    const contract = new ethers.Contract(
                        contractAddress,
                        contractABI,
                        signer
                    );

                    setState({ provider, signer, contract });
                } else {
                    console.error("Ethereum object not found. Install MetaMask.");
                }
            } catch (error) {
                console.error("Error connecting wallet:", error);
            }
        };

        connectWallet();
    }, []);

    console.log(state);

    return <div className = "App" > { /* Your App content */ } < /div>;
}

export default App;

Answer 2

Ethers.js has changed a lot from version 5 to version 6. You are probably using ethers.js version 6

Fix it with [email protected] version by:

  npm uninstall ethers
  npm i -S [email protected]