Getting Error while using Ethers with Next js

[ritesh798]

Hi guys i inatalled ethers in Next App using yarn but when i am importing it it is showing me this error

[ritesh798]

@alymurtazamemon @pacelliv @Koowah @rin-st @Neftyr @Sol-Devloper Can You guys help me ASAP

[Nlferu]

Hi @ritesh798

Please share your code wirh package.json or link repo.

But have you tried running following command: yarn add ethers? It should solve issue as it seems you are missing this dependency.

[ritesh798]

I am importing it after running that command .

[Nlferu]

Can you show your code or just import line?

[ritesh798]

@Neftyr these are my header where i am importing ethers and package.json
Header.js:

import { useMoralis } from "react-moralis";
import { useEffect } from "react";
import { ethers } from "ethers";
export default function Header() {
  const { enableWeb3, account, isWeb3Enabled } = useMoralis();
//   console.log(ethers.balanceOf(account));

  console.log(account);
  useEffect(() => {
    console.log("Hi");
    console.log(isWeb3Enabled);
  }, [isWeb3Enabled]);
  return (
    <div>
      {account ? (
        <div>
          Conneted to {account.slice(0, 6)}...
          {account.slice(account.length - 4)}
        </div>
      ) : (
        <button
          onClick={async () => {
            enableWeb3();
            window.localStorage.setItem("conneted", "inject");
          }}
        >
          Connect
        </button>
      )}
    </div>
  );
}

package.json

{
  "name": "frontenderc20",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "ethers": "^6.0.7",
    "moralis-v1": "^1.12.0",
    "next": "13.1.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.4.2"
  }
}

[alymurtazamemon]

@ritesh798 Please leave your repo link, it is easy to test.

[ritesh798]

thank you @alymurtazamemon @Neftyr

[ritesh798]

hi @alymurtazamemon @Neftyr can you help me on how can I fetch the balance of the connected metamask account here in this headerJs file .

[pacelliv]

If you're using ethers, you can get the balance with: const balance = await ethers.provider.getBalance(account).

[ritesh798]

any other way using moralis to get balance @alymurtazamemon @pacelliv @Neftyr

[pacelliv]

react-moralis offers a useNativeBalance() API.