Issue with "abi.map is not a function" when passing abi to "new ethers.Contract"

[Xaniven]

I am using "hardhat": "^2.14.0", & "ethers": "^5.7.2" (6.+ breaks things so downgraded to 5.3.4 then up to 5.7.2 while trying to solve this issue)
I have this function

const contractAddy = "0x5fbdb2315678afecb367f032d93f642f64180aa3";

async function mintToken() {
  if(window.ethereum){
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = provider.getSigner();
  const contract = new ethers.Contract({
    contractAddy,
    abi,
    signer,
  });
}
  try {
    const response = await contract.mint(BigNumber.from(mintCount));
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

'abi' comes from import { abi } from "../andyChillAbi.json"; which is a copy of the json generated on harthat compile.
Upon running, I get this error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
    at new Interface (interface.ts 100:47) "

it shows defineReadOnly(this, "fragments", abi.map((fragment) => { as the issue

i've seen this error come up for others and it's usually caused by passing in the abi in the wrong place. In my case, i have it as the second argument, abi console.logs an array as it should (28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

i have tried refactoring and even directly passing the abi to a variable to no avail, any direction would be appreciated

[Xaniven]

Update: also tried version 5.5.4 to match the version hardhat is using, no change
recompiled contracts on remix and copied the abi it gave, also to no avail

[ricmoo]

This is (as you said) almost always caused by passing in the wrong type of ABI. Can you do a console.log(Array.isArray(abi), abi)? Usually ABI fragments spit out by tools include an objects whose keys are the name of the contract and whose values are the actual ABI.

[ricmoo]

I’ll be at a computer shortly and can try that out. Is it normal to import from a json file? Is that an ES feature? Or TypeScript feature? Can you try something like import info from "../../andyChillAbi.json" and then pass in info.abi as the ABI? I wonder if the import is doing something strange.

[ricmoo]

Here is some info; https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6#50830840

[Xaniven]

i tried that, info.abi errors ',' expected.ts(1005). I initially started with import andyChillAbi from ../andyChillAbi; but when passing andyChillAbi.abi I got ',' expected.ts(1005). which is why tried the import {abi} way. I also tried const testAbi = andyChillAbi.abi and passing that but that lead me back to the abi.map error as before.

[Xaniven]

I suck and for days didn't realize my stupid mistake,

const contract = new ethers.Contract({ <--
   contractAddy,
   abi,
   signer,
--> });

I have no idea how I ended up with that nor why it took me so long to catch. Thank you so much for all your help with this and for all you've done for web3. 🚀🌑💚

[ricmoo]

Oh wow!! I totally didn’t notice but he above code either. That’s so subtle! I would’ve typed it out instead of copy-paste and missed it too. :s

Glad you found it though! :)