1

I am having a bit of trouble using web3.eth.Contract with Typescript..

import * as ERC721ABI from "../ABIs/ERC721.json";
import Web3 from "web3";

...

const contract = new web3.eth.Contract(ERC721ABI, event.target.value);

...

The error I am receiving is:

Argument of type '({ inputs: { internalType: string; name: string; type: string; }[]; stateMutability: string; type: string; anonymous?: undefined; name?: undefined; outputs?: undefined; } | { anonymous: boolean; inputs: { ...; }[]; name: string; type: string; stateMutability?: undefined; outputs?: undefined; } | { ...; })[]' is not assignable to parameter of type 'AbiItem | AbiItem[]'.
  Type '({ inputs: { internalType: string; name: string; type: string; }[]; stateMutability: string; type: string; anonymous?: undefined; name?: undefined; outputs?: undefined; } | { anonymous: boolean; inputs: { ...; }[]; name: string; type: string; stateMutability?: undefined; outputs?: undefined; } | { ...; })[]' is not assignable to type 'AbiItem[]'.
    Type '{ inputs: { internalType: string; name: string; type: string; }[]; stateMutability: string; type: string; anonymous?: undefined; name?: undefined; outputs?: undefined; } | { anonymous: boolean; inputs: { ...; }[]; name: string; type: string; stateMutability?: undefined; outputs?: undefined; } | { ...; }' is not assignable to type 'AbiItem'.
      Type '{ inputs: { internalType: string; name: string; type: string; }[]; stateMutability: string; type: string; anonymous?: undefined; name?: undefined; outputs?: undefined; }' is not assignable to type 'AbiItem'.
        Types of property 'stateMutability' are incompatible.
          Type 'string' is not assignable to type '"nonpayable" | "view" | "pure" | "payable" | undefined'.  TS2345

    90 | 
    91 |     try {
  > 92 |       const contract = new web3.eth.Contract(ERC721ABI, event.target.value);

Any idea what I'm doing wrong here?

Also, is it possible to import multiple ABIs into web3.eth.Contract, or would I have to create separate instances for each ABI?

Finally, any idea which ABI I would need to use for interacting with Wallets, or would that need a separate call? I'm not quite sure whether Wallets on Ethereum are ALSO smart contracts, or just a public key.

Thanks

1

It seems that the issue comes from how TypeScript imports the JSON files when using REACT.

Instead of importing with import use require

Replace

import * as ERC721ABI from "../ABIs/ERC721.json";

With

const ERC721ABI  = require("../ABIs/ERC721.json");

For more information, you can refer to where I found the issue and solution: https://github.com/ChainSafe/web3.js/issues/3310#issuecomment-701590114

2
  • Oh my word! What Google search magic did you use to find this one! Thanks so much – timhc22 Mar 15 at 15:56
  • I just googled the last error on the stack. I was also having the same problem and it took me a while until I found the solution. Not many people seem to be using typescript with web3 yet. Hopefully, this post will help people from the future to find the solution easily! I'm glad it helped! – Juanu Mar 15 at 16:10
6

you can also do

import { AbiItem } from 'web3-utils'
import Abi from './abi.json'

new web3.eth.Contract(Abi as AbiItem[], abiAddress)

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.