Followed the instruction to create a vite project with metaplex here: https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-vite

I added typescript. When I try to build with tsc && vite build, tsc throws following error:

Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'InputPluginOption'.
  Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'Plugin'.
    Types of property 'resolveId' are incompatible.
      Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type 'ObjectHook<(this: PluginContext, source: string, importer: string | undefined, options: { assertions: Record<string, string>; custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>, {}> | undefined'.
        Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type '(this: PluginContext, source: string, importer: string | undefined, options: { assertions: Record<string, string>; custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>'.
          Types of parameters 'importer' and 'importer' are incompatible.
            Type 'string | undefined' is not assignable to type 'string'.
              Type 'undefined' is not assignable to type 'string'.

28       plugins: [nodePolyfills()],

Replicated the issue here: https://stackblitz.com/edit/vitejs-vite-uqkmtp?file=vite.config.ts

Does anybody have an idea how to solve this?

I need to mint using panthom wallet not keypair directly.
How can i handle this? please let me know.

Having issues with Unhandled Runtime Error. TypeError: nftList.filter is not a function. See screenshot below. Any suggestions?

Similarly to the existing getting-started-* examples, create an example that helps setting up a very simple express.js app using the Metaplex SDK.

• Create an express.js app with only one route that accepts a mint address in the request and returns the NFT object from the SDK as the response.
• Write a detailed README file that explains the steps to reproduce to achieve the created example. Look at the current READMEs for inspiration.

Followed the connect wallet repo & got an error on cannot read properties of undefined (reading 'images')

updated the index.js & Home.module.css files. downloaded packages. followed by npm run dev.

At https://github.com/metaplex-foundation/js-examples/blob/main/getting-started-expressjs/index.cjs#L38 0 shouldn't there be a run()?

Create a simple React application that connects a wallet in the browser via the Solana Wallet Adapter library.

• Create a MetaplexProvider component that uses the wallet provided by the WalletProvider component and return a Metaplex instance. Here is a very rough proof of concept.
• Add dropdown to select a cluster (mainnet, devnet or testnet) and hook that dropdown with the ConnectionProvider which will end up being used by the MetaplexProvider.
• Use the connected wallet to display a random NFT from their wallet and add a "Pick a new random NFT" button to refresh it.
• Write a detailed README file that explains the steps to reproduce to achieve the created example. Look at the current READMEs for inspiration. Since this example is not about getting started with a web framework, choose a starting framework from this repository and link to its README as the first first. I recommend Next.js since it has the lowest amount of steps to get started right now.
• When writing the steps to reproduce, it is fine to add links to larger components or style sheets instead of having to explain them all in the README. Especially if the component is more here for UI proposes than for providing valuable logic.
• When styling components, try to stay consistent to the neutral style that was created in the existing examples.

// inside jsx component
const connection = new Connection("https://api.devnet.solana.com/");
const metaplex = new Metaplex(connection, { cluster: "devnet" }).use(
  walletAdapterIdentity(wallet)
)
const handleClick = async (e: any) => {
    if (!metaplex || !wallet.publicKey) return;

    const { nft: collectionNft } = await metaplex.nfts().create({
      name: "Test,
      uri: "<pinata json url>",
      sellerFeeBasisPoints: 0,
      isCollection: true,
    });
    console.log({ collectionNft });
  };
);

When I press a button the above function is called. It correctly opens up Phantom wallet for approval however when I approve I get the above error.

I am using Phantom Wallet using solana/web3 and useWallet from @solana/wallet-adapter-reactlike so:

import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import {
  PhantomWalletAdapter,
} from "@solana/wallet-adapter-wallets";

const WalletProvider = () => {
 const endpoint = useMemo(() => clusterApiUrl(network), [network]);
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
    ],
    [network]
  );
return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        {children}
      </WalletProvider>
    </ConnectionProvider>
  );
}

Here is phantom wallet UI

My version is: "@metaplex-foundation/js": "^0.18.3"
Is this an issue with Metaplex of Phantom Wallet? Any idea how can I fix it?

Manually updated the 'arbundles' package imports from noble-ed25519 to @noble/ed25519 to get it to work with SvelteKit. Rest of the vite instructions still hold.

Create a react app (vanilla?) that creates an nft and uses esbuild for compilation.

I have used both the React and Vue examples and neither will build for production when using npm preview. It only happens when the metaplex object is called. There error for both the vue and react examples is:

uncaught TypeError: Class extends value undefined is not a constructor or null

Any help resolving this would be appreciated.

Create a simple React application that paginate NFTs from a given wallet.

• Add an input text for users to enter the public key of someone's wallet.
• Use that wallet address to fetch all of its NFTs using the JS SDK.
• Paginate these NFTs in an efficient way. Pagination is not really a think with getProgramAcccount so we have to be creative. This article help understand how to achieve pagination in Solana. This is abstracted by the SDK but we still need to be clever about how we call its method and load the data.
• Write a detailed README file that explains the steps to reproduce to achieve the created example. Look at the current READMEs for inspiration. Since this example is not about getting started with a web framework, choose a starting framework from this repository and link to its README as the first first. I recommend Next.js since it has the lowest amount of steps to get started right now.
• When writing the steps to reproduce, it is fine to add links to larger components or style sheets instead of having to explain them all in the README. Especially if the component is more here for UI proposes than for providing valuable logic.
• When styling components, try to stay consistent to the neutral style that was created in the existing examples.

Hello, I was trying to have the ui mint example to run. And I got the following message:

TypeError: Cannot read properties of null (reading 'guards')

The error happens at line 79 of MintNFTs.js.

const guard = candyMachine.candyGuard.guards;

My sugar config is like this:

{
  "number": 5,
  "symbol": "XX",
  "sellerFeeBasisPoints": 500,
  "isMutable": true,
  "isSequential": false,
  "creators": [
    {
      "address": "<address>",
      "share": 100
    }
  ],
  "uploadMethod": "pinata",
  "awsConfig": null,
  "nftStorageAuthToken": null,
  "shdwStorageAccount": null,
  "pinataConfig": {
    "jwt": "<token>",
    "apiGateway": "https://api.pinata.cloud",
    "contentGateway": "https://gateway.pinata.cloud",
    "parallelLimit": 1
  },
  "hiddenSettings": null,
  "guards": null
}

address and token are of course are changed to my wallet and key

I believe it assumes there will be guards? How can I get the UI to run?

Working on getting-started-nextjs. When I connect with "mainnet-beta" with the clusterApiUrl I am getting this error:

Unhandled Runtime Error
Error: 403 : {"jsonrpc":"2.0","error":{"code": 403, "message":"Access forbidden, contact your app developer or [email protected]."}, "id": "30e5cb83-3f7d-4621-a9f5-cc78f2530ab0" }

Call Stack
ClientBrowser.eval [as callServer]
node_modules@solana\web3.js\lib\index.browser.esm.js (3881:0)

It works fine when I connect to "devnet". Weird. Here is my code for the connection:

const connection = new Connection(clusterApiUrl("mainnet-beta"));
const mx = Metaplex.make(connection);

Hi! With the following code in development mode, everything works but when I go to production nothing works anymore:

const connection = new Connection(clusterApiUrl("devnet"));
  const metaplex = new Metaplex(connection);

  const nft = await metaplex.nfts().findAllByOwner({
    owner: publicKey,
  })

  console.log(nft)

I'm using ViteJS with this config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()], // Or svelte(), etc.
  resolve: {
    alias: {
      stream: "rollup-plugin-node-polyfills/polyfills/stream",
    },
  },
  define: {
    "process.env": process.env,
  },
  
});

Unhandled Runtime Error
Error: Signature verification failed

Call Stack
Transaction.serialize
node_modules@solana\web3.js\lib\index.browser.esm.js (1884:0)
RpcClient.sendTransaction
node_modules@metaplex-foundation\js\dist\esm\plugins\rpcModule\RpcClient.mjs (70:0)
async RpcClient.sendAndConfirmTransaction
node_modules@metaplex-foundation\js\dist\esm\plugins\rpcModule\RpcClient.mjs (105:0)
async TransactionBuilder.sendAndConfirm
node_modules@metaplex-foundation\js\dist\esm\utils\TransactionBuilder.mjs (136:0)
async Object.handle
node_modules@metaplex-foundation\js\dist\esm\plugins\candyMachineModule\operations\mintFromCandyMachine.mjs (53:0)
async Disposable.run
node_modules@metaplex-foundation\js\dist\esm\utils\Disposable.mjs (22:0)

It asks me to use new keyword in line 8.

https://github.com/metaplex-foundation/js-examples/blob/main/connect-wallet/README.md
The README.md file is good, but Step4 is out of format.

4. **Create the `pages/MetaplexProvider.js` file.**  The `MetaplexProvider` component uses the wallet provided by the `WalletProvider` component to define the Metaplex Context previously created.

hey @antey13 , while creating a new Auction house. It is throwing this error !

Unhandled Runtime Error
Error: Signature verification failed

Call Stack
Transaction.serialize
node_modules/@solana/web3.js/lib/index.browser.esm.js (1853:0)
RpcClient.sendTransaction
node_modules/@metaplex-foundation/js/dist/esm/plugins/rpcModule/RpcClient.mjs (70:0)
async RpcClient.sendAndConfirmTransaction
node_modules/@metaplex-foundation/js/dist/esm/plugins/rpcModule/RpcClient.mjs (105:0)
async TransactionBuilder.sendAndConfirm
node_modules/@metaplex-foundation/js/dist/esm/utils/TransactionBuilder.mjs (138:0)
async Object.handle
node_modules/@metaplex-foundation/js/dist/esm/plugins/auctionHouseModule/operations/createAuctionHouse.mjs (49:0)
async Disposable.run
node_modules/@metaplex-foundation/js/dist/esm/utils/Disposable.mjs (22:0)

@metaplex-foundation_js.js?v=319d8b9d:73192 Uncaught Error: Module "http" has been externalized for browser compatibility and cannot be accessed in client code.
at Object.get (@metaplex-foundation_js.js?v=319d8b9d:73192:11)
at @metaplex-foundation_js.js?v=319d8b9d:73860:33