React NFT rendering issue with @metaplex/js - programs.metadata.Metadata undefined error

NFT
1

I’m having trouble getting NFT data to show up in my React project. I followed a tutorial but keep getting an error that says programs.metadata.Metadata is undefined. The code seems simple enough but something isn’t working right.

import { Connection, programs } from '@metaplex/js';

const solanaConnection = new Connection('devnet');
const nftTokenId = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const fetchNftData = async () => {
  try {
    const nftMetadata = await programs.metadata.Metadata.load(solanaConnection, nftTokenId);
    console.log(nftMetadata);
  } catch(err) {
    console.log('Could not load NFT data');
    console.log(err);
  }
};

function MyApp() {
  return (
    <div className="container">
      <button onClick={fetchNftData}>Load NFT Info</button>
    </div>
  );
}

export default MyApp;

The error message says “Cannot read properties of undefined (reading ‘Metadata’)”. I tried running this outside of React too and got the same problem. Has anyone run into this before? Maybe the library changed or I’m missing something obvious?

2

Oh interesting! I’ve been messing with NFT stuff lately and hit similar weird issues. What version of the metaplex library are you using in your package.json? Have you checked if the programs object actually loads before calling metadata on it?

Also wondering about your imports… these libraries sometimes have different export patterns. Getting any console warnings or other errors before the main one?

Try logging the programs object first to see what’s actually available. The metaplex ecosystem changes constantly so it’s probably a version mismatch like DancingCloud said.

3

hey, looks like u might be on an outdated version of metaplex. try switching to @metaplex-foundation/js, it’s the new one. there are some syntax changes, but it should solve that undefined error you’re seeing.