Search code examples
reactjsweb3jssolana-web3jsmetaplex

Metaplex and Solana Web3.js dependency conflict (React)

I am developing a React app, and I have code from two different applications I wrote:

Application A uses Metaplex to find all the NFTs 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 NFTs 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 seconds 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,
)

Enter image description here

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

There seems to be a conflict. The dependency from application A pulls in @solana/spl-token@0.1.8, but application B requires @solana/spl-token@0.2.0.

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 doesn’t work.

I did a npm ls, and it shows this:

Enter image description here

It seems the metaplex/js@4.12.0 has a dependency to 0.1.8, which is old.

How can I resolve this dependency conflict?

Solution

  • 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);