This my package.json file:
{"name": "sol-final","version": "0.1.0","private": true,"dependencies": {"@babel/plugin-proposal-private-property-in-object": "^7.21.11","@metaplex-foundation/js": "^0.20.1","@metaplex-foundation/mpl-token-metadata": "^3.2.1","@metaplex-foundation/umi": "^0.9.2","@metaplex-foundation/umi-bundle-defaults": "^0.9.2","@metaplex/js": "^4.12.0","@project-serum/anchor": "^0.26.0","@solana-mobile/wallet-adapter-mobile": "^2.1.3","@solana/spl-token": "^0.4.6","@solana/wallet-adapter-base": "^0.9.4","@solana/wallet-adapter-react": "^0.15.21","@solana/wallet-adapter-react-ui": "^0.9.5","@solana/wallet-adapter-walletconnect": "^0.1.16","@solana/wallet-adapter-wallets": "^0.16.0","@solana/web3.js": "^1.36.0","@testing-library/jest-dom": "^5.17.0","@testing-library/react": "^13.4.0","@testing-library/user-event": "^13.5.0","@walletconnect/web3-provider": "^1.8.0","axios": "^1.7.2","bs58": "^6.0.0","buffer": "6.0.3","react": "^18.3.1","react-dom": "^18.3.1","react-hot-toast": "^2.4.1","react-scripts": "5.0.1","tweetnacl": "^1.0.3","tweetnacl-util": "^0.15.1","web-vitals": "^2.1.4" },"scripts": {"start": "set HTTPS=true && set SSL_CRT_FILE=localhost.pem && set SSL_KEY_FILE=localhost-key.pem&&react-app-rewired start","build": "GENERATE_SOURCEMAP=false && react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject" },"eslintConfig": {"extends": ["react-app","react-app/jest" ] },"browserslist": {"production": [">0.2%","not dead","not op_mini all" ],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version" ] },"devDependencies": {"ajv": "^7.2.4","assert": "^2.1.0","browser": "^0.2.6","browserify-zlib": "^0.2.0","buffer": "^6.0.3","crypto-browserify": "^3.12.0","https-browserify": "^1.0.0","os-browserify": "^0.3.0","process": "^0.11.10","react-app-rewired": "^2.2.1","source-map-loader": "^5.0.0","stream-browserify": "^3.0.0","stream-http": "^3.2.0","url": "^0.11.3","webpack": "^5.91.0" }}This my code:
import * as anchor from '@project-serum/anchor';/* Core Solana NPM funtions */import { Connection, LAMPORTS_PER_SOL, Transaction, clusterApiUrl, PublicKey, Keypair,} from "@solana/web3.js";/* Core Solana SPL token function NPM */import { createTransferInstruction, getAssociatedTokenAddress, createAssociatedTokenAccountInstruction, ASSOCIATED_TOKEN_PROGRAM_ID, TOKEN_PROGRAM_ID, createApproveInstruction, createMint, mintTo, approveChecked, getAccount, getOrCreateAssociatedTokenAccount, getMinimumBalanceForRentExemptMint, MINT_SIZE, createInitializeMint2Instruction, MintLayout} from "@solana/spl-token";/* Solana Wallet Adapters */import { PhantomWalletAdapter, SolflareWalletAdapter, MathWalletAdapter,} from '@solana/wallet-adapter-wallets';/* Solana Mobile wallet adapter */import { SolanaMobileWalletAdapter, createDefaultAuthorizationResultCache, createDefaultAddressSelector, createDefaultWalletNotFoundHandler,} from "@solana-mobile/wallet-adapter-mobile";/* Solana Math Wallet connect Adapter */import { WalletConnectWalletAdapter } from '@solana/wallet-adapter-walletconnect';// import { Metaplex, keypairIdentity, bundlrStorage } from '@metaplex-foundation/js';/* IDL of Program */import idl from '../idl.json'/* Neccassary NPM */import axios from 'axios';import { Metadata, MetadataDataData, createCreateMetadataAccountV3Instruction,createAndMint,mplTokenMetadata,TokenStandard } from '@metaplex-foundation/mpl-token-metadata';import { createUmi } from '@metaplex-foundation/umi-bundle-defaults';import { createSignerFromKeypair, generateSigner, percentAmount, signerIdentity } from '@metaplex-foundation/umi';const { SystemProgram } = anchor.web3;const MintNFT = async () => { // Connect to cluster const umi = createUmi('https://soft-late-tent.solana-devnet.quiknode.pro/07a90297e0945453e902ac44beae4efbffb4bafb/'); const userWallet = umi.eddsa.createKeypairFromSecretKey(new Uint8Array("3XMuQJU9TDfdTwowz5msBn1wowowM4y7XvJ5odZSwEwowowqJ12KsG6SYC3LSbDj4NEZqZVcdNFvGCwowV6HKpBojkWw0wpb7")); const userWalletSigner = createSignerFromKeypair(umi, userWallet); const mint = generateSigner(umi); umi.use(signerIdentity(userWalletSigner)); umi.use(mplTokenMetadata()); createAndMint(umi, { mint, authority: umi.identity, name: 'VanthuruDaPulla', uri: 'https://gateway.pinata.cloud/ipfs/QmSD4dtfZCyaxZW1eiX7jyfUrUJ43jj8bS559FCVij7ePq/tokenname46_soulbound_camino_5.txt', sellerFeeBasisPoints: percentAmount(500), tokenOwner: userWallet.publicKey, tokenStandard: TokenStandard.NonFungible, }) .sendAndConfirm(umi) .then(() => { console.log('Successfully minted NFT:', mint.publicKey); }) .catch((err) => { console.error('Error minting NFT:', err); });};If import @metaplex-foundation/mpl-token-metadata this NPM I am getting this error:
Class extends value undefined is not a constructor or nullTypeError: Class extends value undefined is not a constructor or null at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/errors.js (http://localhost:3002/static/js/bundle.js:3214:40) at options.factory (http://localhost:3002/static/js/bundle.js:149296:31) at __webpack_require__ (http://localhost:3002/static/js/bundle.js:148690:32) at fn (http://localhost:3002/static/js/bundle.js:148954:21) at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/hooked/metadataDelegateRoleSeed.js (http://localhost:3002/static/js/bundle.js:22043:18) at options.factory (http://localhost:3002/static/js/bundle.js:149296:31) at __webpack_require__ (http://localhost:3002/static/js/bundle.js:148690:32) at fn (http://localhost:3002/static/js/bundle.js:148954:21) at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/hooked/index.js (http://localhost:3002/static/js/bundle.js:22023:14) at options.factory (http://localhost:3002/static/js/bundle.js:149296:31)