TypeError when updating Metaplex Nft, Cannot read 'toBuffer'-CodePudding

Program:

Metaplex-foundation/js(0.11.7)and Solana-Wallet-Adapter(0.9.16) in Create-React-App 5

Preface:

I created a function to create a NFT

const createNFT = async() => {
const { nft } = await metaplex.nfts().create({
uri: "https://arweave.net/5bd58f4V4UEuTl1MGFX1dn1tu3dQTKWo7fCeZyEqQzc",

    })
    console.log(nft)
  }

Which worked fine creating my NFT, now I am trying to update the Metadata with this function

const _address = new PublicKey(address)

const updateMetadata = async() => {

    const { updatedNFT } = await metaplex.nfts().update({
        nftOrSft: _address,
        uri: "https://www.arweave.net/MuV4ddqdaqPzVGNOt89EW1v8bf4wh94ENCmxoZCYbN0?ext=json"
      })

  }

Also tried like this

        const { updatedNFT } = await metaplex.nfts().update(_address, {
            uri: "https://www.arweave.net/MuV4ddqdaqPzVGNOt89EW1v8bf4wh94ENCmxoZCYbN0?ext=json"
          })

Error:

findMetadataPda.ts:10 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toBuffer')
at findMetadataPda (findMetadataPda.ts:10:1)
at Object.handle (updateNft.ts:67:1)
at Task.callback (OperationClient.ts:66:1)
at Task.ts:82:1
at Disposable.run (Disposable.ts:34:1)
at Task.forceRun (Task.ts:74:1)
at Task.run (Task.ts:51:1)
at OperationClient.execute (OperationClient.ts:76:1)
at NftClient.update (NftClient.ts:80:1)
at updateMetadata (App.js:117:1)

CodePudding user response：

I think the issue is you are not overriding the webpack config: https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-react-cra5

Copy the following code inside the new config-overrides.js file.

const webpack = require("webpack");

module.exports = function override(webpackConfig) {
  // Disable resolving ESM paths as fully specified.
  // See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
  webpackConfig.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });

  // Ignore source map warnings from node_modules.
  // See: https://github.com/facebook/create-react-app/pull/11752
  webpackConfig.ignoreWarnings = [/Failed to parse source map/];

  // Polyfill Buffer.
  webpackConfig.plugins.push(
    new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
  );

  // Polyfill other modules.
  webpackConfig.resolve.fallback = {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    util: require.resolve("util"),
    assert: require.resolve("assert"),
    fs: false,
    process: false,
    path: false,
    zlib: false,
  };

  return webpackConfig;
};

then update your browser requirements shown in the link

CodePudding user response：

Thanks to @Yilmaz, there is an answer to this.

I had to pass it as an object like according to the docs it just wasnt clicking in my head haha.

Here is the code for others who may stumble upon this.

    const _address = new PublicKey(address);

    const fetchAndUpdateNft = async (e) => {
        const nftObject = await metaplex.nfts().findByMint(_address);
        console.log(nftObject)
        setNft(nftObject);
    
        const { nft: updatedNFT } = await metaplex.nfts().update(nftObject, {
          uri: "https://arweave.net/MuV4ddqdaqPzVGNOt89EW1v8bf4wh94ENCmxoZCYbN0?ext=json"
        });
        console.log(updatedNFT)
      }
    ```