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

[ken-z-dev]

i try to use '@solana-suite/phantom' to mint a NFT with a react app i just create a react app then install '@solana-suite/phantom' but i get err: "Uncaught TypeError: Class extends value undefined is not a constructor or null" please help !!!!!

file logic:

import { PhantomMetaplex, PhantomSplToken } from '@solana-suite/phantom';
import { ValidatorError } from '@solana-suite/nft';
import { Airdrop, KeypairStr } from '@solana-suite/core';

export const addPublicKey = (creators: any) => {
  const res = creators.map(
    (item: { address: string; share: number; verified: boolean }) => {
      const address = item.address.toPublicKey();
      return {
        address,
        share: item.share,
        verified: item.verified,
      };
    },
  );
  return res;
};

export const faucet = async () => {
  console.log('connected: ', window.solana.isConnected)

  const user = window.solana.publicKey;
  const mint = await Airdrop.request(user);

  mint.match(
    (ok: any) => {
      console.debug('mint: ', ok);
    },
    (err: Error) => {
      console.error('err:', err);
      if ('details' in err) {
        console.error((err as ValidatorError).details);
      }
    },
  );

  return mint.unwrap();
};

export const mintToken = async (
  walletAddress: string,
  cluster: string,
  totalSupply: number,
  decimals: number,
) => {
  const res = await PhantomSplToken.mint(
    walletAddress.toPublicKey(),
    cluster,
    totalSupply,
    decimals,
    window.solana,
  );
  return res;
};

export const connect = async () => {
  await window.solana.connect()
};

file inuse:

import { useState } from "react";
import { useNavigate } from "react-router";
import { faucet, mintToken } from "../functions/nftMint";

const NftPage = () => {
  const navigate = useNavigate();

  console.log("solana: ", window.solana);

  const onFaucet = async (data: any) => {
    try {
      console.log("go here");
      const mint = await faucet();
    } catch (error) {
      console.error(error);
    }
  };

  const onMintToken = async (data: any) => {
    try {
      console.log("go here");
      const mint = await mintToken(window.solana.publicKey.toString(), 'devnet', 1000, 9);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <button type="button" className="btn btn-primary" onClick={onFaucet}>
        faucet 1 sol
      </button>
      <br></br>
      <button type="button" className="btn btn-primary" onClick={onMintToken}>
        mint nft
      </button>
    </>
  );
};
export default NftPage;

[ken-z-dev]

it just hit error when i try to use '@solana-suite/phantom'

[fukaoi]

Hi @truonggau

It looks fine in terms of source code. What version of Solana Suite are you using? Can you grep from the package-lock.json or run npm list or yarn list in the project folder?

[ken-z-dev]

hi @fukaoi it seems to be bug with vite, i created new react app with web-pack then the code run perfectly anyway that is my package-lock with vite

{
  "name": "react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.2.2",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
    "@mui/material": "^5.11.4",
    "@solana-suite/core": "^0.4.5",
    "@solana-suite/nft": "^0.4.5",
    "@solana-suite/phantom": "^0.4.5",
    "@solana-suite/shared": "^0.4.5",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.2",
    "buffer": "^6.0.3",
    "gifler": "^0.1.0",
    "konva": "^8.3.14",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-aws-s3-typescript": "^1.1.5",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.5",
    "react-konva": "^18.2.3",
    "react-router-dom": "^6.4.3",
    "use-image": "^1.1.0",
    "utils": "^0.3.1",
    "vite-plugin-ssr": "^0.4.69"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.2.6",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

and vite config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { env } from 'process'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: { // none of the below works!
      'process.env': JSON.stringify(env),
  },
  // ...other config settings
  optimizeDeps: {
    esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
            global: 'globalThis'
        },
        // Enable esbuild polyfill plugins
        plugins: [
            NodeGlobalsPolyfillPlugin({
                buffer: true
            })
        ]
  }
}
})

[ken-z-dev]

anw, i fixed that issuse using webpack instead of vite

[fukaoi]

I'm glad you were able to resolve the cause. Happy Solana!!