Can't use this package with vite 3 about music-metadata-browser HOT 9 CLOSED

update: just one plugin: https://github.com/grikomsn/vite-plugin-ngmi-polyfill

I solved it with vite4 and vue3. Here is my config

export default defineConfig({
  ...sharedConfig,
  build: {
    rollupOptions: {
      // for production
      plugins: [rollupNodePolyfillsPlugin()],
    },
  },
  resolve: {
    alias: {
      // by node-globals-polyfill
      events: 'rollup-plugin-node-polyfills/polyfills/events',
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({ buffer: true, process: true }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
})

My packages versions:

"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
"music-metadata-browser": "^2.5.9",
"rollup-plugin-polyfill-node": "^0.12.0",
"vite": "^4.1.4",
"vue": "^3.2.45",

from music-metadata-browser.

I also struggled a little bit to use this package with vite, react & typescript, but here is how i managed to make it run:

npm install buffer @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill

then in vite.config.js :

  export default defineConfig({
  // your other settings...
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
          }),
        ],
      },
    },
  });

Then it works flawless.
My packages versions:

    "vite": "^3.2.3",
    "music-metadata-browser": "^2.5.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

from music-metadata-browser.

I think you need to polyfill:

• buffer
• stream

music-metadata-browser is CommonJS module. Eventually I would like to provide an ES-Module music-metadata also works in client side environment. Closes effort that can be found in the es-module-with-browser-support branch. I welcome help with that.

from music-metadata-browser.

I got it working using a buffer, events and utils polyfill and a bit of vite config trickery.

Here is the branch with the working code: https://github.com/lennyanders/music-metadata-browser-8-with-vite-3/tree/music-metadata-with-polyfills

I might look into you'r branch though (and maybe music-metadata itself), since I'm not so happy using it like this.

from music-metadata-browser.

I bumped into the same issue, also getting ReferenceError: global is not defined and ReferenceError: process is not defined (both which can be overrided in vite config define).

from music-metadata-browser.

One of the things you may run into using the ESM is the way Node.js modules are imported. They use the node: URL prefix. I am not sure if that helps, or makes it very difficult to polyfill Node.js modules.

from music-metadata-browser.

I already handled that with an alias in vite, from node:buffer to buffer.
https://github.com/lennyanders/music-metadata-browser-8-with-vite-3/blob/28bc592464a50e6c0be8672a9169c393393fecc0/vite.config.js#L10

from music-metadata-browser.

Hi @lennyanders, I had a look to your music-metadata-with-polyfills. So that is the ESM way music-metadata. That's great, first time I think I actually see it working in the browser!

What you do not have in music-metadata version 8.0.1 are the specialized browser functions, like parseBlob which music-metadata-browser adds. I want to move those into music-metadata.

The idea es-module-with-browser-support branch was to add that part.

Are you willing to further develop the browser compatibility of the music-metadata ESM version?

from music-metadata-browser.

Thanks for sharing your solution @subframe7536

from music-metadata-browser.