Can't upload metadata to bundlrStorage with upload() and uploadMetadata().

[Ivan Milennyi]

I am trying to upload image and metadata with bundlr. In node js environment this code is working, but in react vite typescript app I am getting this error:

TypeError: this._stream.destroy is not a function
    at StreamToAsyncIterator.close (s2ai.ts:213:22)
    at StreamToAsyncIterator.next (s2ai.ts:106:22)
    at StreamToAsyncIterator.next (s2ai.ts:128:33)
    at async deepHash (deepHash.ts:20:22)
    at async deepHashChunks (deepHash.ts:73:5)
    at async deepHashChunks (deepHash.ts:76:10)
    at async deepHashChunks (deepHash.ts:76:10)
    at async deepHashChunks (deepHash.ts:76:10)
    at async deepHashChunks (deepHash.ts:76:10)
    at async deepHashChunks (deepHash.ts:76:10)

Files mentioned in error are from node_modules @Bundlr-Network and arbundles

Here is the code:

 const METAPLEX = Metaplex.make(provider.connection)
        .use(walletAdapterIdentityMeta(wallet))
        .use(bundlrStorage({
            address: 'https://devnet.bundlr.network',
            providerUrl: "https://api.devnet.solana.com",
            timeout: 60000,
        }));
const imgMetaplexFile = await toMetaplexFileFromBrowser(selectedFile as File);
console.log(imgMetaplexFile);
//Error on next string
const imgUri = await METAPLEX.storage().upload(imgMetaplexFile);
console.log(imgUri);

vite.config.js from (https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-vite)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import nodePolyfills from 'rollup-plugin-node-polyfills';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
      events: 'rollup-plugin-node-polyfills/polyfills/events',
      assert: 'assert',
      crypto: 'crypto-browserify',
      util: 'util',
      'near-api-js': 'near-api-js/dist/near-api-js.js',
    },
  },
  define: {
    'process.env': process.env ?? {},
    global: 'window',
  },
  build: {
    target: 'esnext',
    rollupOptions: {
      plugins: [
        nodePolyfills({ crypto: true }),
      ],
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({ buffer: true }),
      ],
    }
  },
});

package.json dependecies

  "dependencies": {
    "@coral-xyz/anchor": "^0.29.0",
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@metaplex-foundation/js": "^0.19.5",
    "@metaplex-foundation/mpl-token-metadata": "^3.1.0",
    "@metaplex-foundation/umi": "^0.8.9",
    "@metaplex-foundation/umi-bundle-defaults": "^0.8.9",
    "@metaplex-foundation/umi-signer-wallet-adapters": "^0.8.9",
    "@solana/spl-token": "^0.3.8",
    "@solana/wallet-adapter-react": "^0.15.35",
    "@solana/wallet-adapter-react-ui": "^0.9.34",
    "@solana/wallet-adapter-wallets": "^0.19.23",
    "assert": "^2.1.0",
    "crypto-browserify": "^3.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "util": "^0.12.5"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }

[Ivan Milennyi]

Fixed by changing rollup-plugin-node-polyfills to vite-plugin-node-polyfills
And updating vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    nodePolyfills(),
  ],
})