1

I was running my next.js app and trying to fetch user I am getting "cannot read properties of undefined" error

enter image description here

And following error in the console enter image description here

Below is the code I was using

import Ewitter from './Ewitter.json';
import ethers from 'ethers';
import { useState, useEffect } from 'react';
const ContractABI = Ewitter.abi;
const ContractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
const Ethereum = typeof window !== 'undefined' && (window as any).ethereum;

const getEwitterContract = () => {
  const provider = new ethers.providers.Web3Provider(Ethereum);
  const signer = provider.getSigner();
  const EwitterContract = new ethers.Contract(
    ContractAddress,
    ContractABI,
    signer
  );

  return EwitterContract;
};

const useEwitter = () => {
  // const Ewitter = getEwitterContract();

  const [currentAccount, setCurrentAccount] = useState<string>('');
  const [currentUser, setCurrentUser] = useState<string>('');

  const connect = async () => {
    try {
      if (!Ethereum) {
        alert('Please install MetaMask');
        return;
      }
      const accounts = await Ethereum.request({
        method: 'eth_requestAccounts',
      });
      if (accounts.length === 0) {
        alert('Please unlock MetaMask');
        return;
      }
      const account = accounts[0];
      console.log('connected to account: ', account);
        setCurrentAccount(account);
    } catch (errors) {
      console.log(errors);
    }
  };

  useEffect(() => {
    if(!Ethereum){
        console.log("No ethereum wallet found, please install metamask")
        return ;
    }
    connect();
  }, []);

  useEffect(() =>{
    if(currentAccount){
      getUser();
    }
  }, [currentAccount])

const getUser = async ()=>{
  const contract = getEwitterContract();
  const user = await contract.getUser(currentAccount);
  const {avatar, bio, name, username, wallet} = user;
  console.log(user);
  return user;
}

  return { connect, account: currentAccount };
};

export default useEwitter;

#Update1 I've changed import ethers from 'ethers' to import {ethers} from 'ethers' and now I'm facing this error

enter image description here

If unable to understand properly or if you want to see the whole codebase then this is the link to the github repo

https://github.com/ChiragDogra/ewitter/blob/userIssue/dapp/hooks/useEwitter.ts

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
Chirag Dogra
  • 51
  • 6

1 Answers1

0

believe or not I just had that issue.

the problem is how you are importing ethers. Should be

 import { ethers } from "ethers";
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • How to use useEffect bro can you please share the code – Chirag Dogra May 16 '22 at 21:18
  • And I think the main problem was in in ethers, it was giving me undefined Have a look at this https://rollbar.com/blog/javascript-typeerror-cannot-read-property-of-undefined/ – Chirag Dogra May 16 '22 at 21:19
  • **Problem 1** In this line of code ```const provider = new ethers.providers.Web3Provider(window.ethereum as any);``` It is showing ```Property 'ethereum' does not exist on type 'Window & typeof globalThis'.``` Although I've checked for it, it is present in my window object. **Problem 2** In this line ``` setContract(EwitterContract)``` It is showing ```Argument of type 'Contract' is not assignable to parameter of type 'SetStateAction'. Type 'Contract' provides no match for the signature '(prevState: null): null'.``` And it is complng with `Call revert exception` err – Chirag Dogra May 18 '22 at 15:18
  • @ChiragDogra I found the issue. `import { ethers } from "ethers";` – Yilmaz May 19 '22 at 18:04