Install moralis into existing create-react-app with TypeScript Return TS Error

Moralis General
#1

Hello Moralis Community,

I have been trying to implement moralis into an existing create-react-app repo that is using TypeScript. It is not the boilerplate your are guys using.

The moment I do yarn add moralis I get the following error:

Argument of type 'import("/Users/btcstorage/WebstormProjects/myNFTProject/node_modules/@ethersproject/contracts/node_modules/@ethersproject/abi/lib/interface").Interface' is not assignable to parameter of type 'import("/Users/btcstorage/WebstormProjects/myNFTProject/node_modules/@ethersproject/abi/lib/interface").Interface'.
Types of property 'fragments' are incompatible.
    The type 'readonly Fragment[]' is 'readonly' and cannot be assigned to the mutable type 'Fragment[]'.  TS2345

"dependencies": {
    "@binance-chain/bsc-connector": "^1.0.0",
    "@ethersproject/experimental": "^5.0.1",
    "@pancakeswap/sdk": "^2.3.2",
    "@pancakeswap/uikit": "^0.50.1",
    "@reduxjs/toolkit": "^1.5.0",
    "@types/multicodec": "^1.0.0",
    "@types/node": "^13.13.5",
    "@types/qs": "^6.9.6",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.4",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-window": "^1.8.3",
    "@types/styled-components": "^5.1.7",
    "@uniswap/token-lists": "^1.0.0-beta.19",
    "@uniswap/v2-core": "^1.0.0",
    "@uniswap/v2-periphery": "^1.1.0-beta.0",
    "@web3-react/core": "^6.1.9",
    "@web3-react/injected-connector": "^6.0.7",
    "@web3-react/walletconnect-connector": "^6.2.4",
    "ajv": "^6.12.3",
    "bignumber.js": "^9.0.0",
    "canvas-confetti": "^1.3.3",
    "cids": "^1.0.0",
    "date-fns": "^2.21.3",
    "easymde": "^2.15.0",
    "ethers": "^5.1.4",
    "graphql": "^15.5.0",
    "graphql-request": "^3.4.0",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.21",
    "moralis": "^0.0.176",
    "multicodec": "^2.0.0",
    "multihashes": "^3.0.1",
    "node-fetch": "^2.6.1",
    "qs": "^6.9.4",
    "react": "^17.0.1",
    "react-async-hook": "^4.0.0",
    "react-countup": "^4.3.3",
    "react-datepicker": "^4.2.1",
    "react-dom": "^17.0.1",
    "react-feather": "^2.0.8",
    "react-helmet-async": "^1.0.9",
    "react-markdown": "^6.0.2",
    "react-masonry-css": "^1.0.16",
    "react-moralis": "^0.3.11",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "react-transition-group": "^4.4.1",
    "react-tsparticles": "^1.35.1",
    "react-window": "^1.8.6",
    "redux-localstorage-simple": "^2.4.1",
    "remark-gfm": "^1.0.0",
    "split-grid": "^1.0.11",
    "styled-components": "^5.3.0",
    "swiper": "6.8.4",
    "typescript": "^4.3.2"
  },

npm view webpack version
5.65.0

yarn list webpack

warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ [email protected]
│ └─ [email protected]
└─ [email protected]

This could be a versioning issue, right?

What I am trying to achieve is to make an API call from front-end asking for the following

x = await Moralis.Web3API.account.getNFTsForContract({“chain”:“eth or bsc or pol”,“address”:“userWalletAddress”,“token_address”:“collectionContractAddress”} )

In the repo we have custom hooks that are using

import { Interface, FunctionFragment } from '@ethersproject/abi'

and we are using the Interface like this:

function toCallState(
  callResult: CallResult | undefined,
  contractInterface: Interface | undefined,
  ...)

return useMemo(() => {
    return toCallState(result, *contract?.interface*, fragment, currentBlock)
  }, [result, contract, fragment, currentBlock])

The bold+italic shows where the TS error appears

What would you recommend I do.

#2

it could be a problem with webpack 5 maybe, you could try with webpack 4 (but I don’t know react well)

I think that you could call that particular function without using Moralis SDK too if you don’t make it work this way

1 Like
#3

I think that you could call that particular function without using Moralis SDK too if you don’t make it work this way --> This would be even the more preferred way.

I will try doing

import { useMoralis, useNFTBalances } from "react-moralis";

const { Moralis, chainId } = useMoralis();

await Moralis.Web3API.account.getNFTsForContract(options)

Thanks for the amazing infrastructure!

#4

if you manage to install Moralis, then you can also do something like this:

x = async () => {
    const  Moralis = require('moralis/node')
    console.log(Moralis.CoreManager.get("VERSION"))
    await Moralis.start({ serverUrl: "https://asfasdf:2053/server", appId: "asgasgasdg" });

    price = await Moralis.Web3API.token.getTokenPrice({address: "0xe9e7cea3dedca5984780bafc599bd69add087d56", chain: "bsc"})
    console.log(price)
    }

x();
1 Like
Speedy Nodes + Moralis API
#5

I will try tomorrow again. Will report back. Thanks for the input.

#6

Good morning,

so trying to install only react-moralis package results in:

./node_modules/react-moralis/lib/index.esm.js
Module not found: Can't resolve 'moralis' in '/Users/btcstorage/WebstormProjects/myNFTProject/node_modules/react-moralis/lib'

Looking at this forum post:


and

installing react-moralis requires moralis.

Trying again to install moralis and resolve the issue I had in the first post.

#7

The issue is with TypeScript:

TypeScript error in /Users/btcstorage/WebstormProjects/myNFTProject/src/state/multicall/hooks.ts(191,56):
Argument of type 'import("/Users/btcstorage/WebstormProjects/myNFTProject/node_modules/@ethersproject/contracts/node_modules/@ethersproject/abi/lib/interface").Interface' is not assignable to parameter of type 'import("/Users/btcstorage/WebstormProjects/myNFTProject/node_modules/@ethersproject/abi/lib/interface").Interface'.
  Types of property 'fragments' are incompatible.
    The type 'readonly Fragment[]' is 'readonly' and cannot be assigned to the mutable type 'Fragment[]'.  TS2345

    189 | 
    190 |   return useMemo(() => {
  > 191 |     return results.map((result) => toCallState(result, contract?.interface, fragment, currentBlock))
        |                                                        ^
    192 |   }, [fragment, contract, results, currentBlock])
    193 | }
    194 |
#8

The property fragments located inside node_modules/@ethersproject/abi/lib/interface").Interface has Array<Fragment> type.

export declare class Interface {
    readonly fragments: Array<Fragment>;
    readonly errors: {
        [name: string]: any;
    };
    readonly events: {
        [name: string]: EventFragment;
    };
    readonly functions: {
        [name: string]: FunctionFragment;
    };
    readonly structs: {
        [name: string]: any;
    };
    readonly deploy: ConstructorFragment;
    readonly _abiCoder: AbiCoder;
    readonly _isInterface: boolean;
    constructor(fragments: string | Array<Fragment | JsonFragment | string>);
    format(format?: string): string | Array<string>;
    static getAbiCoder(): AbiCoder;
    static getAddress(address: string): string;
    static getSighash(functionFragment: FunctionFragment): string;
    static getEventTopic(eventFragment: EventFragment): string;
    getFunction(nameOrSignatureOrSighash: string): FunctionFragment;
    getEvent(nameOrSignatureOrTopic: string): EventFragment;
    getSighash(functionFragment: FunctionFragment | string): string;
    getEventTopic(eventFragment: EventFragment | string): string;
    _decodeParams(params: Array<ParamType>, data: BytesLike): Result;
    _encodeParams(params: Array<ParamType>, values: Array<any>): string;
    encodeDeploy(values?: Array<any>): string;
    decodeFunctionData(functionFragment: FunctionFragment | string, data: BytesLike): Result;
    encodeFunctionData(functionFragment: FunctionFragment | string, values?: Array<any>): string;
    decodeFunctionResult(functionFragment: FunctionFragment | string, data: BytesLike): Result;
    encodeFunctionResult(functionFragment: FunctionFragment | string, values?: Array<any>): string;
    encodeFilterTopics(eventFragment: EventFragment, values: Array<any>): Array<string | Array<string>>;
    encodeEventLog(eventFragment: EventFragment, values: Array<any>): {
        data: string;
        topics: Array<string>;
    };
    decodeEventLog(eventFragment: EventFragment | string, data: BytesLike, topics?: Array<string>): Result;
    parseTransaction(tx: {
        data: string;
        value?: BigNumberish;
    }): TransactionDescription;
    parseLog(log: {
        topics: Array<string>;
        data: string;
    }): LogDescription;
    static isInterface(value: any): value is Interface;
}

Whereas the interface that moralis package is adding to
node_modules/@ethersproject/contracts/node_modules/@ethersproject/abi/lib/interface

has ReadonlyArray<Fragment> modifier

export declare class Interface {
    readonly fragments: ReadonlyArray<Fragment>;
    readonly errors: {
        [name: string]: ErrorFragment;
    };
    readonly events: {
        [name: string]: EventFragment;
    };
    readonly functions: {
        [name: string]: FunctionFragment;
    };
    readonly structs: {
        [name: string]: any;
    };
    readonly deploy: ConstructorFragment;
    readonly _abiCoder: AbiCoder;
    readonly _isInterface: boolean;
    constructor(fragments: string | ReadonlyArray<Fragment | JsonFragment | string>);
    format(format?: string): string | Array<string>;
    static getAbiCoder(): AbiCoder;
    static getAddress(address: string): string;
    static getSighash(fragment: ErrorFragment | FunctionFragment): string;
    static getEventTopic(eventFragment: EventFragment): string;
    getFunction(nameOrSignatureOrSighash: string): FunctionFragment;
    getEvent(nameOrSignatureOrTopic: string): EventFragment;
    getError(nameOrSignatureOrSighash: string): ErrorFragment;
    getSighash(fragment: ErrorFragment | FunctionFragment | string): string;
    getEventTopic(eventFragment: EventFragment | string): string;
    _decodeParams(params: ReadonlyArray<ParamType>, data: BytesLike): Result;
    _encodeParams(params: ReadonlyArray<ParamType>, values: ReadonlyArray<any>): string;
    encodeDeploy(values?: ReadonlyArray<any>): string;
    decodeErrorResult(fragment: ErrorFragment | string, data: BytesLike): Result;
    encodeErrorResult(fragment: ErrorFragment | string, values?: ReadonlyArray<any>): string;
    decodeFunctionData(functionFragment: FunctionFragment | string, data: BytesLike): Result;
    encodeFunctionData(functionFragment: FunctionFragment | string, values?: ReadonlyArray<any>): string;
    decodeFunctionResult(functionFragment: FunctionFragment | string, data: BytesLike): Result;
    encodeFunctionResult(functionFragment: FunctionFragment | string, values?: ReadonlyArray<any>): string;
    encodeFilterTopics(eventFragment: EventFragment, values: ReadonlyArray<any>): Array<string | Array<string>>;
    encodeEventLog(eventFragment: EventFragment, values: ReadonlyArray<any>): {
        data: string;
        topics: Array<string>;
    };
    decodeEventLog(eventFragment: EventFragment | string, data: BytesLike, topics?: ReadonlyArray<string>): Result;
    parseTransaction(tx: {
        data: string;
        value?: BigNumberish;
    }): TransactionDescription;
    parseLog(log: {
        topics: Array<string>;
        data: string;
    }): LogDescription;
    parseError(data: BytesLike): ErrorDescription;
    static isInterface(value: any): value is Interface;
}

That is why typechecker is screaming. In one module we have Array and in the other ReadOnlyArray

@cryptokid - would you know how to proceed with the following type error? It could be that it is not related to webpack in the end. :thinking:

UPDATE:

There seems to be a lot of other conflicting types. Not sure how to solve this one.

#9

Can you try to install only Moralis sdk?

#10

doing yarn add moralis yields the same error message as above. The one about fragements.

I managed to silence the typeScript errors with ts-ignore in several places and make it work on the front-end. So I am getting the response from the API like I wanted, but that is not a solution. For some reason there are few TS declarations like the Interface or Chain that are conflicting.