1

Issue

Attempting to follow the 'your first request' example here: https://docs.metaplex.com/sdk/js/getting-started#your-first-request

The module referred to in the examples doesn't contain the data needed.

For context, I am using this example to develop the solution explained at step 5 of these instructions: https://gist.github.com/creativedrewy/9bce794ff278aae23b64e6dc8f10e906

Steps to replicate

Step 1) I install the @metaplex/js package via: yarn add @metaplex/js

Step 2) I import programs from the module by placing import { programs } from '@metaplex/js';.

Step 3) I attempt to unpack Metadata from programs via: const { Metadata } = programs.metadata;

At this stage, if I execute npm run start or yarn run start I see the error that the property Metadata of programs.metadata is undefined. When I look in node_modules/@metaplex/js/ I see that the error is correct.

The only mention of metadata in the module is the function used to lookup metadata once you have the URL. The stage I am at is attempting to retrieve the URL, so this package is not useful, despite being the only one referred to in the docs.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Muckee
  • 474
  • 1
  • 8
  • 26

1 Answers1

1

To solve the issue, I created an empty react app and added the following dependencies to my package.json file:

  "@metaplex/js": "^1.1.1",
  "@solana/spl-token": "^0.1.8",
  "@solana/web3.js": "^1.24.1",

I then ran npm install inside the app's root directory.

Inside App.js (or index.js if you did not use create-react-app), I unpacked Metadata directly from the metaplex package with the following line, placed at the top of the file:

import { Metadata } from '@metaplex/js';

Beneath all the imports, I added the following code (an edited version of the code from the example in the original question):

const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch {
    console.log('Failed to fetch metadata');
  }
};

In my implementation, I'm using a button inside my App() function, instead of calling run() directly like in the example:

<button
  onClick={run}
>
  GALLERY
</button>

Now, when clicking the button, I correctly see the metadata JSON displayed in the console.

Muckee
  • 474
  • 1
  • 8
  • 26
  • How did `import { Metadata } from '@metaplex/js';` fix your issue? You don't seem to be referencing it in this code. Can you post the full App.js or a codepen? This could clear things up. – Zip184 Dec 31 '21 at 15:19
  • 1
    I am also having this problem. It doesn't seem like import { Metadata} should change anything since you are calling it with progams.metadata.Metadata (you didn't even have to import it, it's not being used). If you could explain how you solved this, w/the code shown, that would help me right now. – jumar Jan 01 '22 at 04:28
  • 1
    @jumar my bad I just made a mistake copying the example code over (my actual code is more complex so not suitable to use here). I just updated my answer. You use `Metadata.load()` directly as opposed to `programs.metadata.Metadata.load()`. If you're still stuck then we can open a chat and I'll help figure it out. – Muckee Jan 03 '22 at 21:56