Lesson 13: Weird error with @useDapp

[cromewar]

Hello there I'm getting a weird error trying to execute useContractFunction, as the documentation here says in order to interact with a contract function I should create a new contract, providing the address and the ABI. Here is my code:

    import {useContractFunction, useEthers} from '@usedapp/core'
    import TokenFarm from "../chain-info/contracts/TokenFarm.json"
    import ERC20 from "../chain-info/contracts/MockERC20.json"
    import networkMapping from "../chain-info/deployments/map.json"
    import {constants, utils} from "ethers"
    import {Contract} from '@ethersproject/contracts'
    
    export const useStakeTokens = (tokenAddress: string) => {
        // chainId 
        const {chainId} = useEthers()
        // abi
        const {abi} = TokenFarm
        // address
        // const dappTokenAddress = chainId ? networkMapping[String(chainId)]["DappToken"][0] : constants.AddressZero
        const tokenFarmAddress = chainId ? networkMapping[String(chainId)]["TokenFarm"][0] : constants.AddressZero
        // approve
        const tokenFarmInterface = new utils.Interface(abi)
        const tokenFarmContract = new Contract(tokenFarmAddress, tokenFarmInterface)
    
        const erc20ABI = ERC20.abi
        const erc20Interface = new utils.Interface(erc20ABI)
        const erc20Contract = new Contract(tokenAddress, erc20Interface)
        // approve
        const { send: approveErc20Send, state: approveAndStakeErc20State } =
            useContractFunction(erc20Contract, "approve", {
                transactionName: "Approve ERC20 transfer",
            })
    
    }

The error occurs on useContractFunctionwith erc20Contract:

This is the complete error message

Argument of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/front_end/node_modules/@usedapp/core/node_modules/@ethersproject/contracts/lib/index").Contract'.
  Types of property '_runningEvents' are incompatible.
    Type '{ [eventTag: string]: RunningEvent; }' is not assignable to type '{ [eventTag: string]: RunningEvent; }'. Two different types with this name exist, but they are unrelated.
      'string' index signatures are incompatible.
        Type 'RunningEvent' is not assignable to type 'RunningEvent'. Two different types with this name exist, but they are unrelated.
          Types have separate declarations of a private property '_listeners'.  TS2345

    23 |     // approve
    24 |     const { send: approveErc20Send, state: approveAndStakeErc20State } =
  > 25 |         useContractFunction(erc20Contract, "approve", {
       |                             ^
    26 |             transactionName: "Approve ERC20 transfer",
    27 |         })
    28 |

Argument of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/front_end/node_modules/@ethersproject/contracts/lib/index").Contract' is not assignable to parameter of type 'import("/home/cromewar/Solidity-Projects/full_defi_app/dev/front_end/node_modules/@usedapp/core/node_modules/@ethersproject/contracts/lib/index").Contract'.
Types of property '_runningEvents' are incompatible.
Type '{ [eventTag: string]: RunningEvent; }' is not assignable to type '{ [eventTag: string]: RunningEvent; }'. Two different types with this name exist, but they are unrelated.
'string' index signatures are incompatible.
Type 'RunningEvent' is not assignable to type 'RunningEvent'. Two different types with this name exist, but they are unrelated.
Types have separate declarations of a private property '_listeners'. TS2345

It says the types are not compatible but they are actually the exact same, does anyone has a clue about what is happening?

I also cloned the code from the repo but the error stills, @PatrickAlphaC have you any clue why this is happening?

[cromewar]

Solution:

Patrick had the exact same problem on this video for chainlink's hackathon, seeing the video I noticed the problem vscode was mainly complaining about two instances of node_modules between @usedapp and @ethersproject/contracts.

It seems @usedapp already comes with a implementation of ethersproject inside of it, so I found the solution.

Replace this line:

import {Contract} from '@ethersproject/contracts'

For this line:

import {Contract} from '@usedapp/core/node_modules/@ethersproject/contracts'

and eureka, the problem is solved ;)

Thanks @PatrickAlphaC if it wasn't for the video I would never have noticed the error.

[PatrickAlphaC]

You are awesome @cromewar!!!!!

I should run into errors on-screen more often XD

[cromewar]

Yes please! haha

[NarithChesda]

that's right!