metaplex and solana web3 dependency conflict (react.js)

Question

I am developing a react app and I have code from 2 different applications I wrote

Application A uses metaplex to find all the NFT's owned by a user (wallet address):

import { Connection as MetaConnection } from "@metaplex/js/";
import { Metadata, MetadataData } from "@metaplex-foundation/mpl-token-metadata";

const lookupNfts = async () => {
    let metaConnection = new MetaConnection('mainnet-beta');
    const nftsmetadata = await Metadata.findDataByOwner(metaConnection, props.walletKey);

    // now I have a list of nft's via metadata
}

"dependencies": {
  "@metaplex-foundation/mpl-token-metadata": "^1.2.5",
  "@metaplex/js": "^4.12.0",
  "@solana/spl-token": "^0.1.8",
  "@solana/web3.js": "^1.35.3",
}

Application B does a payment between wallets of an NFT

import { Connection, Keypair, PublicKey } from "@solana/web3.js";
import { Account } from "@solana/spl-token";   // ERROR on this line, see screenshot

async function transfer_tokens(wallet: Keypair, connection: Connection, amount: number, reciver_token_account: Account, from_token_account: Account) {
//if tx takes more when 60 sec to complete you will receive error here
const transfer_tx = await splToken.transfer(
    connection,
    wallet,
    from_token_account.address,
    reciver_token_account.address,
    wallet,
    amount,
    [wallet],
    false,
    splToken.TOKEN_PROGRAM_ID,
)

However, when I try to use this code together in one application, it doesnt work...

There seems to be a conflict. Dependency from application A pulls in @solana/[email protected] but application B requires @solana/[email protected].

If I upgrade solana/spl-token to 0.2.0, application A breaks. If I keep solana/spl-token at 0.1.8, application B doesnt work.

I did a npm ls, and it shows this.

It seems the metaplex/[email protected] has a dependency to 0.1.8, which is old.

How can I resolve this dependency conflict?

Answer 1

The @metaplex/js library uses old versions of MPL packages such as @metaplex-foundation/mpl-token-metadata which, as you figured out, use an old version of @solana/spl-token. Unfortunately, if even just one nested dependency uses version 0.1.8 of the SPL token program, it will be used for the entire project.

If you are using yarn, a quick fix could be to force version 0.2.0 using the resolutions object in your package.json.

"resolutions": {
  "@solana/spl-token": "0.2.0"
}

If you're using npm, you will also need to install this package.

However, it is worth noting that the current JavaScript SDK from Metaplex is going to be deprecated in favour of the new one: https://github.com/metaplex-foundation/js-next

With the new JS SDK, you can fetch all NFTs by owner using the following piece of code.

import { Metaplex } from "@metaplex-foundation/js-next";
import { Connection, clusterApiUrl } from "@solana/web3.js";

const connection = new Connection(clusterApiUrl("mainnet-beta"));
const metaplex = new Metaplex(connection);
const owner = new PublicKey("some_public_key");

const nft = await metaplex.nfts().findAllByOwner(owner);