Unable to use Umi with Nuxt3

[ASoldo]

Hi, following Metaplex tutorials I was not able to use Metaplex npm packages with Nuxt3. Is there a way to setup Nuxt3 project without Polyfill issues?

these are my errors im facing when importing {createUmi}

[viandwi24]

experiencing almost the same problem, using umi always makes my nuxt stop working error

Cannot read properties of undefined (reading 'prototype')
at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/@metaplex-foundation_umi-bundle-defaults.js?v=eaf4a82e:2834:78

[ASoldo]

@viandwi24 I gave up on Solana and Metaplex... trash dx, really hated it. Never comming back.

[viandwi24]

@ASoldo I also think like that, previously I felt umi brought good changes, but it turns out there are still problems like this, I think it's still best to use metaplex-js.

my proboem when tryng to import @metaplex-foundation/umi-bundle-defaults when import @metaplex-foundation/umi i thinks is fine

[viandwi24]

this how im try to solve this issue :

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ["@nuxt/ui", "@hebilicious/vue-query-nuxt", "@pinia/nuxt"],
  ssr: false,
  vite: {
    esbuild: {
      target: "esnext",
    },
    build: {
      target: "esnext",
    },
    optimizeDeps: {
      include: [
        "@solana/web3.js",
        "@coral-xyz/anchor",
        "@metaplex-foundation/umi",
        "@metaplex-foundation/umi-bundle-defaults",
        "@metaplex-foundation/mpl-token-metadata",
        "@metaplex-foundation/digital-asset-standard-api",
        "@metaplex-foundation/mpl-bubblegum",
        "@metaplex-foundation/umi-rpc-web3js",
        "@metaplex-foundation/umi-program-repository",
        "buffer"
      ],
      esbuildOptions: {
        target: "esnext",
      },
    },
    define: {
      "process.env.BROWSER": true,
      "globalThis": "window",
      "global": "window",
    },
  },
}

and then to use umi in my nuxt im using this minimal setup :

import { createUmi, type RpcInterface, type Umi } from '@metaplex-foundation/umi'
import { mplTokenMetadata } from '@metaplex-foundation/mpl-token-metadata'
import { mplBubblegum } from '@metaplex-foundation/mpl-bubblegum'
import { dasApi, type DasApiInterface } from "@metaplex-foundation/digital-asset-standard-api"
import { web3JsRpc } from '@metaplex-foundation/umi-rpc-web3js'
import { defaultProgramRepository } from '@metaplex-foundation/umi-program-repository'

const umi = createUmi()
      .use(defaultProgramRepository())
      .use(web3JsRpc(this.options.rpc))
      .use(mplTokenMetadata())
      .use(mplBubblegum())
      .use(dasApi())

so im not using umi bundle

hope can help u

[kevinrodriguez-io]

Umi bundle isn't the issue, the issue is on umi itself and that it tries to expose node-fetch even on browser. Idk if this happens on nextjs because of module transpilation but still sucks big time.

[viandwi24]

@kevinrodriguez-io ah i see, but for now im dont use umi bundle, import one per one like you see in my comment above