Metaplex JS SDK returning null when jsonLoaded is True

Question

I'm having an issue while trying to get an NFT's JSON data. Regardless of mint address, I keep getting null.

(Using @metaplex-foundation/[email protected] on a free QuickNode RPC).

I'm trying the following:

const mintAddress = new PublicKey("AHWC8Jb4vXNKJi7ypVN3fKcsXrWXqJDc7Jdfa2FSxvp7");
const x = await metaplex.nfts().findByMint({ mintAddress });

The mint address above is just a random Claynosaurz. The data that's returned is showing model: "nft" and jsonLoaded: true, but the json field comes back as null.

I came across a post in the SDK's repo "issues" page, that null is returned when invalid json is returned. However, this seems to be the case for any mint address I try. I suspect it's probably an issue on my end.

Has anyone come across a similar issue or have any idea what I might be doing wrong? 🤔

Answer 1

Stack Overflow Products Getting this error with the @metaplex-foundation/js-next SDK Asked 1 year, 6 months ago Modified 4 months ago Viewed 1k times 1

Currently working on a react app and I'm getting this error after installing metaplex. My react-scripts version is 4.0.3

./node_modules/@metaplex-foundation/js-next/dist/esm/programs/token/gpaBuilders/TokenGpaBuilder.mjs Can't import the named export 'ACCOUNT_SIZE' from non EcmaScript module (only default export is available) metaplex Share Improve this question Follow edited Jul 24, 2022 at 1:37 Sercan's user avatar Sercan 4,90733 gold badges1919 silver badges3737 bronze badges asked Jul 24, 2022 at 1:27 Nebson's user avatar Nebson 3644 bronze badges Add a comment

Report this ad 2 Answers Sorted by:

Highest score (default) 2

I found out the solution in the git of metaplex here. I will leave you here the whole answer anyway.

Getting Started with Metaplex and CRA 5 This example sets up a new React app with Metaplex using "Create React App" (CRA) version 5 — i.e. using Webpack 5.

This example has been generated using the following steps:

Create a new project using the "Create React App" command.

npx create-react-app getting-started-react-cra5 cd getting-started-react-cra5 Install the Metaplex and the Solana SDKs.

npm install @metaplex-foundation/js @solana/web3.js Install some polyfills.

npm install assert util crypto-browserify stream-browserify Install and use react-app-rewired.

Installs react-app-rewired.

npm install react-app-rewired

Replaces "react-scripts" with "react-app-rewired" in package.json scripts.

sed -i '' 's/react-scripts /react-app-rewired /g' package.json Override Webpack 5 configurations.

Create a new file to override Webpack 5 configurations.

touch config-overrides.js Copy the following code inside the new config-overrides.js file.

const webpack = require("webpack");

module.exports = function override(webpackConfig) { // Disable resolving ESM paths as fully specified. // See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586 webpackConfig.module.rules.push({ test: /.m?js/, resolve: { fullySpecified: false, }, });

// Ignore source map warnings from node_modules. // See: https://github.com/facebook/create-react-app/pull/11752 webpackConfig.ignoreWarnings = [/Failed to parse source map/];

// Polyfill Buffer. webpackConfig.plugins.push( new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] }) );

// Polyfill other modules. webpackConfig.resolve.fallback = { crypto: require.resolve("crypto-browserify"), stream: require.resolve("stream-browserify"), util: require.resolve("util"), assert: require.resolve("assert"), fs: false, process: false, path: false, zlib: false, };

return webpackConfig; }; Update your browser requirements.

Update the browserslist object of your package.json to include the following production requirements.

"browserslist": { "production": [

• ">0.2%",
  

• "not dead",
  

• "not op_mini all"
  

• "chrome >= 67",
  

• "edge >= 79",
  

• "firefox >= 68",
  

• "opera >= 54",
  

• "safari >= 14"
  

  ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, That's it!

Answer 2

The issue you're encountering with fetching NFT JSON data using the @metaplex-foundation/js library and receiving null for the JSON field, despite jsonLoaded: true, can stem from a few potential sources. Let's go through some troubleshooting steps and possible solutions:

Ensure Correct SDK Initialization

First, ensure your Metaplex SDK is correctly initialized with your QuickNode RPC endpoint. Incorrect initialization can lead to failed data fetching:

    import { Metaplex, keypairIdentity, bundlrStorage } from '@metaplex-foundation/js';
    import { Connection, PublicKey } from '@solana/web3.js';
    
    const connection = new Connection("<Your_QuickNode_RPC_URL>");
    const metaplex = Metaplex.make(connection)
        .use(keypairIdentity("<Your_Keypair>"))
        .use(bundlrStorage());
    // Now attempt to fetch the NFT data

Replace <Your_QuickNode_RPC_URL> with your actual QuickNode RPC endpoint URL and <Your_Keypair> with your keypair if you're performing actions that require authentication.

Verify the Mint Address

Double-check the mint address you're querying. If the address is incorrect or doesn't correspond to an NFT minted on the network you're querying, it could result in null JSON data. The address you provided should be valid, but it's always good to confirm.

Network Issues

Since you're using a free QuickNode RPC, there might be rate limits or network restrictions affecting your requests. Try querying another RPC endpoint or the default Solana RPC endpoint to rule out network-specific issues:

const connection = new Connection("https://api.mainnet-beta.solana.com");

Fetch Metadata Manually

If the SDK method continues to return null, consider fetching the NFT's metadata manually to see if there's an issue with the metadata itself or its on-chain storage. You can do this by first retrieving the metadata account associated with the NFT mint address and then fetching the metadata from it:

import { Metadata } from '@metaplex-foundation/mpl-token-metadata';
import { Connection, PublicKey } from '@solana/web3.js';

const connection = new Connection("<Your_QuickNode_RPC_URL>");
const mintAddress = new PublicKey("AHWC8Jb4vXNKJi7ypVN3fKcsXrWXqJDc7Jdfa2FSxvp7");

const metadataPDA = await Metadata.getPDA(mintAddress);
const metadataAccount = await Metadata.load(connection, metadataPDA);
console.log(metadataAccount.data.data.uri);

// Fetch the JSON data from the URI if available

Check SDK and Package Versions

Ensure your @metaplex-foundation/js package and any dependencies are up to date. Version discrepancies can sometimes cause unexpected behavior.

Review SDK Issues and Documentation

Since you mentioned finding a post about this issue on the SDK's GitHub issues page, keep an eye on that thread for any updates or responses from the developers. There might be a known bug or a workaround suggested by the community or developers.

If after trying these steps you're still facing issues, consider reaching out to the QuickNode support team or the Metaplex SDK developers for more specific guidance, as there could be an underlying issue with the SDK or the RPC service.