Type Error Cannot read properties of undefined (reading 'Web3Provider') at fetchingData - react-hooks

Question

It must show console log Big Number instead its showing error.
expected output
error occured
I am new to blockchain. I have connected the private key of hardhat with wallet but its showing Type Error. The expected output and the output which Ive got has attached along with this.
import React, { useState, useEffect } from "react";
import { ethers, BigNumber } from "ethers";
import Web3Modal from "web3modal";
//INTERNAL IMPORT
import {
checkIfWalletConnected,
connectWallet,
connectingWithBooToken,
connectingWithLIfeToken,
connectingWithSingleSwapToken,
connectingWithIWTHToken,
connectingWithDAIToken,
} from "../Utils/appFeatures";
import { IWETHABI } from "./constants";
// import ERC20 from "./ERC20.json";
export const SwapTokenContext = React.createContext();
export const SwapTokenContextProvider = ({ children }) => {
const swap = "Welcome to swap my token";
//USESTATE
const [account, setAccount] = useState("");
const [ether, setEther] = useState("");
const [networkConnect, setNetworkConnect] = useState("");
const [weth9, setWeth9] = useState("");
const [dai, setDai] = useState("");
const [tokenData, setTokenData] = useState([]);
const addToken = [
"0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
"0x15Ff10fCc8A1a50bFbE07847A22664801eA79E0f",
"0xAe9Ed85dE2670e3112590a2BB17b7283ddF44d9c",
];
//FETCH DATA
const fetchingData = async () => {
try{
//GET USER ACCOUNT
const userAccount = await checkIfWalletConnected();
setAccount(userAccount);
//CREATE PROVIDER
const web3modal = new Web3Modal();
const connection = await web3modal.connect();
const provider = new ethers.providers.Web3Provider(connection);
//CHECK Balance
const balance = await provider.getBalance(userAccount);
console.log(balance);
}catch(error){
console.log(error);
}
}
useEffect(()=>{
fetchingData();
},[]);
return (
<SwapTokenContext.Provider value={{swap}}>
{children}
</SwapTokenContext.Provider>
);
};

Answer 1

your imports are probably failed try to import like this instead :
const ethers = require("ethers");
const BigNumber = require("ethers");