Minting from CandyMachine in the front end: "Class extends value undefined is not a constructor or null"

Question

I am trying to mint from candy machine in React and following this example from the docs:

import { mplCandyMachine } from '@metaplex-foundation/mpl-candy-machine';
import { createUmi } from '@metaplex-foundation/umi-bundle-defaults';

const umi = createUmi('https://api.devnet.solana.com').use(mplCandyMachine());

I am getting this error:

errors.ts:3 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/errors.js (errors.ts:3:1)
    at options.factory (react refresh:6:1)...

I think this could be some circular importing issue but I dont know how to make this to work. Creating a fresh react project and adding this three lines throws this error.

I am using this versions

   "@metaplex-foundation/mpl-candy-machine": "^6.0.0",
   "@metaplex-foundation/umi-bundle-defaults": "^0.8.9",

Answer 1

The problem is that your packages (node modules) and libraries are not properly installed, try reinstalling them with a stable internet. Instead of installing all the Umi framework and the Umi-compatible Candy Machine library in one npm install statement, install them each at a time.

npm install @metaplex-foundation/umi
npm install @metaplex-foundation/umi-bundle-defaults 
npm install@solana/web3.js 
npm install@metaplex-foundation/mpl-candy-machine@alpha

pay attention to your terminal for any error and wait for each to install before continuing with the code. Happy Coding!