'ethers.js Contract object gets error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')
I hope someone can enlighten me. I have a website with a button which should create a new Contract object of my token contract via the ethers.js library. I successfully connected my metamask with the website but when I click the button there is an error message like this:
ethers-5.2.umd.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at new Interface (ethers-5.2.umd.min.js:1:199125)
at BaseContract.getInterface (ethers-5.2.umd.min.js:1:321623)
at Contract.BaseContract (ethers-5.2.umd.min.js:1:317578)
at new Contract (ethers-5.2.umd.min.js:1:329138)
at buyTicket ((index):707:25)
at HTMLButtonElement.onclick ((index):274:91)
This is my button code
<button class="btn btn-primary" type="button" id="buyTicket" onclick="buyTicket()">
Buy Ticket
</button>
And this is my JavaScript section at the bottom of my html.file
<script src='https://cdn.jsdelivr.net/npm/[email protected]/bignumber.min.js'></script>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.3/web3.min.js'></script>-->
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript">
</script>
<script>
const provider = new ethers.providers.Web3Provider(window.ethereum)
provider.send("eth_requestAccounts", []);
const signer = provider.getSigner()
//let tokenContractAddress = "0xf209CE1960Fb7E750ff30Ba7794ea11C6Acdc1f3";
let tokenContractAddress = "0xb37f4a11045FB48A89fb4930C72481fce9942E07";
let lotteryContractAddress = "0x3E03D4595b164F5C2098a5D154d7f2Bf516ba102";
// Use BigNumber
let decimals = BigInt(18);
let amount = BigInt(5);
const tokenABI = [
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "value",
"type": "uint256"
}
],
"name": "Approval",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "from",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "to",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "value",
"type": "uint256"
}
],
"name": "Transfer",
"type": "event"
},
{
"inputs": [
{
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"internalType": "address",
"name": "spender",
"type": "address"
}
],
"name": "allowance",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "approve",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "account",
"type": "address"
}
],
"name": "balanceOf",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "decimals",
"outputs": [
{
"internalType": "uint8",
"name": "",
"type": "uint8"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"internalType": "uint256",
"name": "subtractedValue",
"type": "uint256"
}
],
"name": "decreaseAllowance",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"internalType": "uint256",
"name": "addedValue",
"type": "uint256"
}
],
"name": "increaseAllowance",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "name",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "symbol",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "totalSupply",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "transfer",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "sender",
"type": "address"
},
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "transferFrom",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "nonpayable",
"type": "function"
}
];
function buyTicket(lotteryContractAddress, tokenContractAddress, amount, tokenABI, provider) {
const tokenInstance = new ethers.Contract(tokenContractAddress, tokenABI, provider);
}
</script>
After that I want to interact with that Contract instance, but I am not able to create it and don't know what I am missing here.
Solution 1:[1]
I finally did it. I simply had to put the whole thing into the function section so that the variables were created after pushing the button. So this is the working code, i hope that helps someone fixing the same error faster than me :-)
<script src='https://cdn.jsdelivr.net/npm/[email protected]/bignumber.min.js'></script>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.3/web3.min.js'></script>-->
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript">
</script>
<script>
function buyTicket() {
const provider = new ethers.providers.Web3Provider(window.ethereum)
provider.send("eth_requestAccounts", []);
const signer = provider.getSigner()
//let tokenContractAddress = "0xf209CE1960Fb7E750ff30Ba7794ea11C6Acdc1f3";
let tokenContractAddress = "0xb37f4a11045FB48A89fb4930C72481fce9942E07";
let lotteryContractAddress = "0x3E03D4595b164F5C2098a5D154d7f2Bf516ba102";
// Use BigNumber
let decimals = BigInt(18);
let amount = BigInt(5);
const tokenABI = [{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"anonymous": false,
"inputs": [{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "value",
"type": "uint256"
}
],
"name": "Approval",
"type": "event"
},
{
"anonymous": false,
"inputs": [{
"indexed": true,
"internalType": "address",
"name": "from",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "to",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "value",
"type": "uint256"
}
],
"name": "Transfer",
"type": "event"
},
{
"inputs": [{
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"internalType": "address",
"name": "spender",
"type": "address"
}
],
"name": "allowance",
"outputs": [{
"internalType": "uint256",
"name": "",
"type": "uint256"
}],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [{
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "approve",
"outputs": [{
"internalType": "bool",
"name": "",
"type": "bool"
}],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [{
"internalType": "address",
"name": "account",
"type": "address"
}],
"name": "balanceOf",
"outputs": [{
"internalType": "uint256",
"name": "",
"type": "uint256"
}],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "decimals",
"outputs": [{
"internalType": "uint8",
"name": "",
"type": "uint8"
}],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [{
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"internalType": "uint256",
"name": "subtractedValue",
"type": "uint256"
}
],
"name": "decreaseAllowance",
"outputs": [{
"internalType": "bool",
"name": "",
"type": "bool"
}],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [{
"internalType": "address",
"name": "spender",
"type": "address"
},
{
"internalType": "uint256",
"name": "addedValue",
"type": "uint256"
}
],
"name": "increaseAllowance",
"outputs": [{
"internalType": "bool",
"name": "",
"type": "bool"
}],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "name",
"outputs": [{
"internalType": "string",
"name": "",
"type": "string"
}],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "symbol",
"outputs": [{
"internalType": "string",
"name": "",
"type": "string"
}],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "totalSupply",
"outputs": [{
"internalType": "uint256",
"name": "",
"type": "uint256"
}],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "transfer",
"outputs": [{
"internalType": "bool",
"name": "",
"type": "bool"
}],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [{
"internalType": "address",
"name": "sender",
"type": "address"
},
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "transferFrom",
"outputs": [{
"internalType": "bool",
"name": "",
"type": "bool"
}],
"stateMutability": "nonpayable",
"type": "function"
}
];
const tokenInstance = new ethers.Contract(tokenContractAddress, tokenABI, provider);
//Do something with this instance here
}
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | McMoe |