TypeError: can't access property "call", Stream is undefined

[Zedonboy]

I am using vite.

i have added polyfills, but it still gives me this error

[itxve]

I'm also using vite, unfortunately an error occurred。

Error

_stream_readable.js:184 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call') at new Readable (_stream_readable.js:184:10) at new ReadableWebToNodeStream (index.js:17:9) at parseReadableStream (index.js:30:16) at Object.parseBlob (index.js:48:12) at HTMLInputElement. (UploadSong.vue:20:7)

[Borewit]

Gents, can you please provide me with a repo to reproduce the error?

[itxve]

Gents, can you please provide me with a repo to reproduce the error? I provided an example of an error. music-metadata-browser-vite

[Borewit]

Thanks @itxve, I am very busy at the moment, please give me 2 weeks

[Borewit]

I had a look to the repo. To get to the error you describe I had to define global, which I did by adding:

<script>window.global = window;</script>

to index.html

The basic issue is basically polyfill Node specific dependencies. To get around the issue you had, can be done by adding events as a dependency.

Next one will be Buffer. It is probably fixable as well, but here I stop my little Vite adventure. I know it is painful to get this things right, unfortunately I make it much easier for you. Making this library available for Node.js and browser, without this kind of distracting bureaucracy is unfortunately not possible yet. By all means, please prove me wrong.

[itxve]

thank you very much ,I got my demo working with this answer😄。 process is not defined

first

yarn add events

in main.ts

import { Buffer } from "buffer";
import process from "process";
window.Buffer = Buffer;
window.process = process;

in vite.config.ts

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    global: "window",
  },
  plugins: [vue()],
});

live demo https://itxve.github.io/music-metadata-browser-vite/

[itxve]

in vite.config.ts can also use this way

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
// https://vitejs.dev/config/
// https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2
export default defineConfig({
  resolve: {
    alias: {
      // by node-globals-polyfill
      events: "rollup-plugin-node-polyfills/polyfills/events",
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
      // Node.js global to browser globalThis
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        // not must
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  build: {
    outDir: "docs",
    rollupOptions: {
      plugins: [
        // Enable rollup polyfills plugin
        // used during production bundling
        rollupNodePolyFill(),
      ],
    },
  },
  plugins: [vue()],
});

[Borewit]

Thanks for sharing @itxve!

Would you like link in the README to your repo?

[itxve]

Thanks for sharing @itxve!

Would you like link in the README to your repo?

I Would Be Pleased To.