Uncaught ReferenceError: require is not defined

[lawchak]

Hello,
I am fairly new to Ethereum development, I just tried to follow this tutorial but instead of connection to a public blockchain I am trying to connect to my local blockchain instance through MetaMask which is already installed and the local chain is added to it. However, I am facing an issue at the first line of my code during the "require" part. Here is my code below:

const { ethers } = require("ethers");

const provider = new ethers.providers.Web3Provider(window.ethereum)
async function connectToMetamask(){
   await provider.send("eth_requestAccounts", []);
}
connectToMetamask();
const signer = provider.getSigner();

const ERC20_ABI = [
   "function getAll() public view returns(uint [] memory)",
   "function get(uint position) public view returns(uint)",
   "function add(uint id, string memory activityName, string memory authorName, string memory activityType) public",
   "function length() public view returns(uint)",
]

const address = '0xf0c707dafa300d8bd19bbfed42b86469d50b022f';

const contractInstance = new ethers.Contract(address, ERC20_ABI, provider);

const main = async () => {
   const name = await contractInstance.name();
   console.log("name: " , name);
}

main();

And the error I am facing is below:
Uncaught ReferenceError: require is not defined at code.js:1:20

Can anyone help me with solving this issue? I followed the tutorial step-by-step but doesn't seem to work for me..

Note: I have already written my own contract and deployed it to my local blockchain and that is where I got all these functions and the address from.

[abdimussa87]

Can you paste your package.json file here?