_bundlr_network_client__WEBPACK_IMPORTED_MODULE_0__在使用metaplex.nfts().uploadMetadata()时不是构造函数

Question

我使用这元工javascript在solana块链上使用nfts。

在上传nft的元数据时，我得到了以下错误：TypeError: _bundlr_network_client__WEBPACK_IMPORTED_MODULE_0__ is not a constructor

连接到元工的代码：

const fromWallet = Keypair.generate();
console.log(fromWallet);
const connection = new Connection(clusterApiUrl("devnet"));
const metaplex = Metaplex.make(connection)
 .use(keypairIdentity(fromWallet))
 .use(
   bundlrStorage({
     address: "https://devnet.bundlr.network",
     providerUrl: "https://api.devnet.solana.com",
     timeout: 60000,
   })
 );

上载元数据功能：

async function uploadMetadata() {
    try {
      const { uri, metadata } = await metaplex.nfts().uploadMetadata({
        name: formInput.name,
        image: image,
        description: formInput.description,
      });
      console.log(metadata.image);
      return uri;
    } catch (error) {
      console.log(`Error uploading metadata - ${error}`);
    }
  }

我不明白我为什么要犯这个错误。我试图通过从元工配置中删除.use(keypairIdentity(fromWallet))来实现这个函数。但是我发现了另一个错误，那就是关于未定义的钱包。对于类似的元工配置，mx.nfts().findNftByMint(new PublicKey(address))工作正常。

任何帮助都是非常感谢的。谢谢。

Answer 1

我正面临着同样的问题，我打开了一个关于复式github回购https://github.com/metaplex-foundation/js/issues/138的问题。

因此，我们需要使用钱包适配器，keypairIdentity & walletAdapterIdentity应该在浏览器上工作，但是只有walletAdapterIdentity才适合我。

元工创建的钱包适配器的链接是https://github.com/solana-labs/wallet-adapter。

更新，您只需包装您的应用程序组件

import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { ConnectionProvider, useConnection, useWallet, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import {
  GlowWalletAdapter,
  PhantomWalletAdapter,
  SlopeWalletAdapter,
  SolflareWalletAdapter,
  TorusWalletAdapter,
} from '@solana/wallet-adapter-wallets';
import { clusterApiUrl, PublicKey } from '@solana/web3.js';
import './App.css';
import '@solana/wallet-adapter-react-ui/styles.css';
import { useEffect, useState, useMemo } from "react";
import { Metaplex } from '@metaplex-foundation/js';

export const App = () => {
  return (
    <BrowserRouter>
      <Context>
        <Content />
      </Context>
    </BrowserRouter>
  );
};

const Context = ({ children }) => {

  const network = WalletAdapterNetwork.Devnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);


  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
      new GlowWalletAdapter(),
      new SlopeWalletAdapter(),
      new SolflareWalletAdapter({ network }),
      new TorusWalletAdapter(),
    ],
    [network]
  );

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
};

const Content = () => {
  const { connection } = useConnection();
  const wallet = useWallet();
  const metaplex = Metaplex.make(connection);
  const [walletAddress, setWalletAddress] = useState('');
  const [walletWarning, setWalletWarning] = useState(false);
  const [disabled, setDisabled] = useState(false);



  
  useEffect(() => {
    const onload = async () => {
      await checkIfWalletIsConnected();
    }
    window.addEventListener('load', onload);
    return () => window.removeEventListener('load', onload);
  }, []);





  return (
    <div className='main-app-container'>
      <div className='sec-app-container'>
        <WalletMultiButton/>
        <div className="router-container">
          <Routes>
            <Route exact path="/" element={<Landing walletWarning={walletWarning} />} />
            <Route exact path="/mint_interface"
              element={
                  <MintInterface wallet={wallet} connection={connection} />
              } />
          </Routes>
        </div>
      </div>
    </div >
  );
};


export default App;

在MintInterface组件中

import { useState } from 'react';
import { Form, Button, Spinner } from 'react-bootstrap';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { Metaplex, keypairIdentity, walletAdapterIdentity, bundlrStorage } from '@metaplex-foundation/js';
import { Connection, clusterApiUrl, Keypair } from '@solana/web3.js';
import "./minting.css";


const cluster = "devnet";


function MintInterface({ wallet, connection }) {
   const [maturityDate, setMaturityDate] = useState("");
   const [quantity, setQuantity] = useState(1);
   const [loading, setLoading] = useState(false);




   const metaplex = Metaplex.make(connection)
       .use(walletAdapterIdentity(wallet))
       .use(
           bundlrStorage({
               address: "https://devnet.bundlr.network",
               providerUrl: "https://api.devnet.solana.com",
               timeout: 60000,
           })
       );
       );
}




export default MintInterface;

确保在配置中使用walletAdapterIdentity