ApiNetworkProvider does not satisfy ITransactionFetcher interface

[AliArthur]

Argument of type 'ApiNetworkProvider' is not assignable to parameter of type 'ITransactionFetcher'.
The types returned by 'getTransaction(...)' are incompatible between these types.
Type 'Promise' is not assignable to type 'Promise'.
Type 'TransactionOnNetwork' is not assignable to type 'ITransactionOnNetwork'.
The types of 'contractResults.items' are incompatible between these types.
Type 'ContractResultItem[]' is not assignable to type 'IContractResultItem[]'.
Type 'ContractResultItem' is not assignable to type 'IContractResultItem'.
The types of 'logs.events' are incompatible between these types.
Type 'TransactionEvent[]' is not assignable to type 'ITransactionEvent[]'.
Type 'TransactionEvent' is not assignable to type 'ITransactionEvent'.
The types returned by 'dataPayload.valueOf().entries()' are incompatible between these types.
Type 'IterableIterator<[number, number]>' is missing the following properties from type 'ArrayIterator<[number, number]>': map, filter, take, drop, and 9 more.

const apiNetworkProvider = new ApiNetworkProvider(chainGateway); const watcherUsingApi = new TransactionWatcher(apiNetworkProvider); return watcherUsingApi.awaitCompleted(txHash);

[Buky33]

Hello, I have exactly the same error when trying this :

const apiNetworkProvider = new ApiNetworkProvider("https://devnet-api.multiversx.com", { clientName: "multiversx-your-client-name" });
const watcherUsingApi = new TransactionWatcher(apiNetworkProvider);

Tryed with "@multiversx/sdk-core": "^13.2.1" and "^13.9.0"

[andreibancioiu]

Hello @AliArthur, hello @Buky33,

Thanks, we'll have a look 🙌

How does the import of ApiNetworkProvider look like?

Additionally, what TypeScript version are you using (seen in package.json)?

[andreibancioiu]

Reproduced, thank you 🙌

Since v13.7.0, we've brought the network providers directly into sdk-core:

https://docs.multiversx.com/sdk-and-tools/sdk-js/sdk-js-cookbook-v13/#creating-network-providers

Thus, workaround: use the latest available sdk-core, and adjust the import of ApiNetworkProvider.

Furthermore, we are going to fix this compatibility issue (regression), so that the TransactionWatcher continues to work with the ApiNetworkProvider as defined in sdk-network-providers (long time support).

[andreibancioiu]

Actually, @AliArthur, @Buky33, I was mistaken above, where I thought I've reproduced the issue (in fact, I did not).

Do you think it's possible to provide the TypeScript version you are using, your tsconfig.json file, and possibly a few details about your build flow (e.g. are you using an additional build tool such as webpack)?

The workaround would be as mentioned, to use the imports from sdk-core directly:
https://docs.multiversx.com/sdk-and-tools/sdk-js/sdk-js-cookbook-v13/#creating-network-providers

An alternative workaround would be to fix the TypeScript version - 5.6.3 should be fine.

Thank you 🙌

Additional references:

• Cannot bump typescript to 5.6 due to botbuilder INodeBuffer error microsoft/botbuilder-js#4746 (comment)

[Buky33]

Hello @andreibancioiu
Thanks for taking time to check this.
Actually, I just tried to update few things following your tips, but I still have the issue. Here are some info :

ApiNetworkProvider is imported from '@multiversx/sdk-core'

Error message is :
Argument of type 'ApiNetworkProvider' is not assignable to parameter of type 'ITransactionFetcher'.
The types returned by 'getTransaction(...)' are incompatible between these types.
Type 'Promise' is not assignable to type 'Promise'.
Type 'TransactionOnNetwork' is not assignable to type 'ITransactionOnNetwork'.
The types of 'contractResults.items' are incompatible between these types.
Type 'ContractResultItem[]' is not assignable to type 'IContractResultItem[]'.
.....

Package.json :
"@multiversx/sdk-core": "13.9.0",
"typescript": "5.6.3"

tsconfig.json :
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "/*.ts", "/*.tsx"],
"exclude": ["node_modules"]
}

next.config.js :
/** @type {import('next').NextConfig} */

const nextConfig = {
webpack: (config) => {
config.resolve.fallback = {
fs: false,
buffer: require.resolve('buffer'),
crypto: require.resolve('crypto-browserify'),
path: require.resolve('path-browserify'),
stream: require.resolve('stream-browserify'),
process: require.resolve('process/browser'),
};
return config;
},
reactStrictMode: false,
eslint: {
dirs: ['components', 'config', 'hooks', 'pages', 'store', 'types', 'utils'],
},
};

module.exports = nextConfig;

Thanks again for taking some time

[andreibancioiu]

Hello @Buky33,

Thank you for the provided details 🙏

We will attempt to reproduce it using your configuration, and come back with the solution.

In the meantime, a quick and dirty workaround: new TransactionWatcher(<any>apiNetworkProvider); - there should be no issues at runtime (the only issues would be at compile-time).