【问题标题】：React、Web3.js 和 Metaplex：无法从 @metaplex/js 导入 `programs.metadata.Metadata`
【发布时间】：2022-01-23 15:48:00
【问题描述】：

问题

尝试在此处遵循“您的第一个请求”示例：https://docs.metaplex.com/sdk/js/getting-started#your-first-request

示例中提到的模块不包含所需的数据。

对于上下文，我正在使用此示例来开发在这些说明的第 5 步中解释的解决方案：https://gist.github.com/creativedrewy/9bce794ff278aae23b64e6dc8f10e906

复制步骤

第 1 步）我通过以下方式安装 @metaplex/js 软件包：yarn add @metaplex/js

第 2 步）我通过放置 import { programs } from '@metaplex/js'; 从模块导入 programs。

第 3 步）我尝试通过 const { Metadata } = programs.metadata; 从程序中解压 Metadata

在这个阶段，如果我执行npm run start 或yarn run start，我会看到programs.metadata 的属性Metadata 未定义的错误。当我查看node_modules/@metaplex/js/ 时，我发现错误是正确的。

模块中唯一提到元数据的功能是在您拥有 URL 后用于查找元数据的函数。我所处的阶段是尝试检索 URL，因此这个包没有用，尽管它是文档中唯一提到的包。

【问题讨论】：

标签： node.js web3 web3js metaplex solana-web3js

【解决方案1】：

为了解决这个问题，我创建了一个空的 react 应用，并将以下依赖项添加到我的 package.json 文件中：

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

然后我在应用的根目录中运行npm install。

在App.js（或者index.js，如果你没有使用create-react-app）里面，我直接从metaplex包中解压了Metadata，下面一行，放在文件的顶部：

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

在所有导入下，我添加了以下代码（原始问题中示例代码的编辑版本）：

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

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

在我的实现中，我在App() 函数中使用了一个按钮，而不是像示例中那样直接调用run()：

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

现在，当单击按钮时，我可以正确地看到控制台中显示的元数据 JSON。

【讨论】：