mpl-token-metadata is breaks The React app

Question

When I added the following line to my project, I saw that it crashed and React.js did not build the page.

import * as mpl from "@metaplex-foundation/mpl-token-metadata";

Edit: I found some new information about my problem. if I import createMetadataAccountV3 it gives error. if I don't import createMetadataAccountV3 it doesn't give error. the problem is in this function. But i need this.

and I get the following error in my console:

I think the problem is with the versions but I still can't solve it. I would be grateful if you could help me. Thanks. The package.json is like this:

[ ... "@metaplex-foundation/mpl-token-metadata": "^3.1.2", "@metaplex-foundation/umi": "^0.9.0", "@metaplex-foundation/umi-bundle-defaults": "^0.9.0", "@metaplex-foundation/umi-web3js-adapters": "^0.9.0", "@metaplex/js": "^4.12.0", "@project-serum/anchor": "^0.26.0", "@solana/spl-token": "^0.1.8", "@solana/wallet-adapter-base": "^0.9.4", "@solana/wallet-adapter-react": "^0.15.3", "@solana/wallet-adapter-react-ui": "^0.9.5", "@solana/wallet-adapter-salmon": "^0.1.14", "@solana/wallet-adapter-wallets": "^0.16.0" ...] "devDependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.4.0", "@types/node": "^17.0.17", "@types/react": "^17.0.40", "@types/react-dom": "^17.0.11", "process": "^0.11.10", "react-app-rewired": "^2.1.11", "react-scripts": "5.0.0", "source-map-loader": "^3.0.1", "typescript": "^4.5.5" }

Answer 1

There seems to be something wrong with the application you are using.

I just created a sample application that successfully imports createMetadataAccountV3 from @metaplex-foundation/mpl-token-metadata.

The app I created was built with the latest version of create-solana-dapp which is a great modern way to spin up new Solana projects.

On a side note, it's not recommended to import projects with the syntax below, as this breaks 'tree shaking':

import * as mpl from '@metaplex-foundation/mpl-token-metadata';

Instead, try to import only the symbols you need, like so:

import { createMetadataAccountV3 } from '@metaplex-foundation/mpl-token-metadata';

Another more complete app that uses the library above is this Token Creator. Instead of creating a project from scratch, maybe that can help you get your project up and running quickly.