While running my next.js app that is using solidity smart contracts, I am getting "Cannot read properties of undefined" error

Question

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

And following error in the console

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

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

Answer 1

believe or not I just had that issue.

the problem is how you are importing ethers. Should be

 import { ethers } from "ethers";

Answer 2

It's an extension method, you can't mock it. Under the covers it'll probably invoke the underlying source (Users) query provider ExecuteAsync method, that's what you need to mock on your db sets.

Word of advice: what you're doing is really hard, use a real database or, because it's an async method and not supported by the in-memory provider, a library that does it (my library EntityFrameworkCore.Testing may suit your needs).