Import createUmi function from @metaplex-foundation/umi-bundle-defaults showing error in Vite

[solanaChainLover]

Hi, there! How are you doing? I am trying to transfer compressed NFTs using Metaplex Umi and I am facing prototype error in the chrome browser.

import { publicKey, TransactionBuilder, Transaction } from "@metaplex-foundation/umi";
import { createUmi } from "@metaplex-foundation/umi-bundle-defaults";
import { getAssetWithProof, mplBubblegum, transfer } from "@metaplex-foundation/mpl-bubblegum";
import { devnetHTTPProvider } from '../constants'

export const transferCNFT = async (assetId: string, currentLeafOwner: string, newLeafOwner: string, merkleTree: string) => {
    const umi = createUmi(devnetHTTPProvider).use(mplBubblegum())
    const assetWithProof = await getAssetWithProof(umi, publicKey(assetId))

    const transactionBuilder : TransactionBuilder = await transfer(umi, {
        ...assetWithProof,
        merkleTree: publicKey(merkleTree),
        leafOwner: publicKey(currentLeafOwner),
        newLeafOwner: publicKey(newLeafOwner)
    })

    const transaction = transactionBuilder.build(umi);
    return transaction;
}

When I block createUmi part, it works well but if I open createUmi part, then showing this kind of error in browser. In this case, it works well. // const umi = createUmi(devnetHTTPProvider).use(mplBubblegum())

In this case, it doesn't work well. const umi = createUmi(devnetHTTPProvider).use(mplBubblegum())

I've dig into several docs and umi docs but not yet fixed the issue.

If anyone faced the same issue and fixed, then please help me to fix this issue asap.

Best regards, Thanks!

[ASoldo]

Hi, I'm having the same issue when importing @metaplex-foundation/umi-bundle-defaults I get global is not defined. I'm using Nuxt3 in my setup. Can someone take a look why this happens?

[ASoldo]

@mernblockchainlover2019 this is my config that resolved this issue. Issue is with Polyfills:

import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from "rollup-plugin-polyfill-node";
export default defineNuxtConfig({
  modules: ["@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt"],
  vite: {
    esbuild: {
      target: "esnext",
    },
    build: {
      target: "esnext",
    },
    plugins: [
      NodeGlobalsPolyfillPlugin({
        buffer: true,
        process: true,
      }),
      nodePolyfills({
        include: ["stream"],
      }),
    ],
    resolve: {
      alias: {
        stream: "stream-browserify",
      },
    },
    optimizeDeps: {
      include: ["@project-serum/anchor", "@solana/web3.js", "buffer"],
      esbuildOptions: {
        target: "esnext",
        define: {
          global: "globalThis",
        },
        plugins: [],
      },
    },
    define: {
      "process.env.BROWSER": true,
    },
  },
  pinia: {
    storesDirs: ["./stores/**"],
  },
  devtools: {
    enabled: true,

    timeline: {
      enabled: true,
    },
  },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

I had to install these 2 for Nuxt3:

import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from "rollup-plugin-polyfill-node";

hope this helps.

[ASoldo]

Still doesn't work with this changes:

[catlina-nero]

@mernblockchainlover2019 this is my config that resolved this issue. Issue is with Polyfills:

import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from "rollup-plugin-polyfill-node";
export default defineNuxtConfig({
  modules: ["@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt"],
  vite: {
    esbuild: {
      target: "esnext",
    },
    build: {
      target: "esnext",
    },
    plugins: [
      NodeGlobalsPolyfillPlugin({
        buffer: true,
        process: true,
      }),
      nodePolyfills({
        include: ["stream"],
      }),
    ],
    resolve: {
      alias: {
        stream: "stream-browserify",
      },
    },
    optimizeDeps: {
      include: ["@project-serum/anchor", "@solana/web3.js", "buffer"],
      esbuildOptions: {
        target: "esnext",
        define: {
          global: "globalThis",
        },
        plugins: [],
      },
    },
    define: {
      "process.env.BROWSER": true,
    },
  },
  pinia: {
    storesDirs: ["./stores/**"],
  },
  devtools: {
    enabled: true,

    timeline: {
      enabled: true,
    },
  },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

I had to install these 2 for Nuxt3:

import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from "rollup-plugin-polyfill-node";

hope this helps.

It's works for me.

[solanaChainLover]

I was able to fix the issue by setting config like this.

{
  plugins: [react()],
  resolve: {
    alias: {
      crypto: 'crypto-browserify',
      'node-fetch': 'isomorphic-fetch'
    }
  },
  define: {
    process: {},
    global: {}
  }
}

Adding crypto and node-fetch alias was working for me.

Thanks for help.