TypeError: _bundlr_network_client__WEBPACK_IMPORTED_MODULE_0__ is not a constructor while using metaplex.nfts().uploadMetadata()

Question

I'm using this metaplex javascript SDK for working with nfts on solana blockchain.

While uploading the metadata for an nft, I am getting the following error: TypeError: _bundlr_network_client__WEBPACK_IMPORTED_MODULE_0__ is not a constructor

Code for connecting to metaplex:

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,
   })
 );

Uploading metadata function:

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}`);
    }
  }

I couldn't understand why I'm getting this error. I tried to hit the function by removing .use(keypairIdentity(fromWallet)) from metaplex configuration. But I am getting another error regarding undefined wallet that way. For the similar configuration of metaplex, mx.nfts().findNftByMint(new PublicKey(address)) is working correctly.

Any help is appreciated. Thank you.

Answer 1

I was facing the exact same issue I opened an issue on metaplex github repo https://github.com/metaplex-foundation/js/issues/138

so it turned out we need to use the wallet adapter keypairIdentity & walletAdapterIdentity should work on the browser however only walletAdapterIdentity worked for me .

the link to wallet adapter also created by metaplex is https://github.com/solana-labs/wallet-adapter

update, you just need to wrap you app component

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;

and in the MintInterface Component

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;

make sure you use walletAdapterIdentity in the configuration