error "cannot read properties of undefined (reading 'prototype')" when use umi bundle in vite (nuxt 3)

[viandwi24]

this 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

but when im using this minimal setup (directly from @metaplex-foundation/umi) is working

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())

my nuxt config :

export default defineNuxtConfig({
  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",
    },
  },
}

[kevinrodriguez-io]

Same here with react + vite.

[kevinrodriguez-io]

I managed to solve all my issues with this config:

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import topLevelAwait from 'vite-plugin-top-level-await';
import wasm from 'vite-plugin-wasm';

import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    wasm(), // Ignore, this is for my project
    topLevelAwait(), // This is for my project too
    nodePolyfills({
      // Whether to polyfill specific Node.js modules in the browser
      protocolImports: true,
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // Not needed
      stream: 'stream-browserify', // This fixes the prototype thing
    },
  },
  define: {
    global: 'globalThis', // This fixes an issue with globals and stuff
  },
});

[kevinrodriguez-io]

Still, it doesn't seem normal that you have to polyfill node streams on the browser.