Bug with in-browser implementation

I’m seeing the following message in my browser with builds and local dev (Node16, Typescript 4, Vite, VueJS)

_stream_readable.js:529 Uncaught (in promise) TypeError: process.nextTick is not a function
    at emitReadable (_stream_readable.js:529)
    at addChunk (_stream_readable.js:303)
    at readableAddChunk (_stream_readable.js:280)
    at ReadableWebToNodeStream.Readable.push (_stream_readable.js:241)
    at ReadableWebToNodeStream._read (index.js:44)

Here’s the full trace:

Before I say ANYTHING else, I just want to say THANK YOU for all the difficult and thoughtful work you put into building and maintaining this library. I also want to add that I’ve spent a few hours googling and experimenting with potential fixes before coming here to ask for help. 😀

In my project, I do the following shimming:

src/shim.ts

// source: https://github.com/Azure/azure-sdk-for-js/issues/14496
import * as process from 'process'
import * as events from 'events'
import { Buffer } from 'buffer'
import { Readable } from 'readable-stream'

Object.assign(self, {
  process,
  Buffer,
  Readable,
  EventEmitter: events,
  global: self,
})

This is my “main” file (entrypoint) ==> src/main.ts

import 'shim.ts'
import 'vue-global-api'
import devalue from '@nuxt/devalue'
import { ViteSSG } from 'vite-ssg'

.... and then EVERYTHING else after that

and I have a file called src/components/helpers.ts (where I use music-metadata-browser)

/* eslint-disable no-console */
import * as musicMetadata from 'music-metadata-browser'


interface FileToBeUploaded extends File {
  audioMeta?: musicMetadata.IAudioMetadata | null
}

const parseMeta = async(audioFilesToParse: FileToBeUploaded[]) => {
  try {
    const metaArray = Promise.all(
      audioFilesToParse.map(async(file) => {
        const metaForFile = await musicMetadata.parseBlob(file)

        if (metaForFile.common.title && (metaForFile.common.artist || metaForFile.common.artists))
          console.log('GOT META: ', metaForFile)
        else console.warn('NO Artist or Song Meta! for ', file.name)

        return Object.assign(file, {
          audioMeta: metaForFile || null,
        })
      }),
    )

    return metaArray
  }
  catch (error) {
    console.error(error)
  }
}

const sanitizeFilenames = (newFiles: FileToBeUploaded[]) => {
  return newFiles.map((item) => {
    // Replace any spaces in filename with underscore
    const sanitizedName = item.name.split(' ').join('_')

    return Object.defineProperty(item, 'name', {
      writable: true,
      value: sanitizedName,
    })
  })
}

export const prepareFiles = async(filesToPrepare: FileToBeUploaded[]) => {
  const sanitizedFileArray = sanitizeFilenames(filesToPrepare)
  const parsedMetaFileArray = await parseMeta(sanitizedFileArray)

  return parsedMetaFileArray
}

Any help would be MUCH appreciated! Thank you so much!

[Borewit]

Any difference using:

import * as process from 'process/browser;

?

I’m gonna have a look at your links for the commit and the pull you merged to try and work backwards from what might have caused the behavior. I’d be happy to try and be useful/contribute. I love this library…and the code’s really clean/fun to read 😃

Glad you like. There is work to do if you are interested, particularly in the area of browser adaptation, or maybe I should say: the modules being more suitable universal use (Node.js + browser) with recent new features like ES modules and web stream support in Node.js. Getting feedback if we are getting rid of the shimming pain (that is what I expect from utilizing ES modules) is already helpful.

Related issues: (using bottom-up approach:)

• Borewit/peek-readable#339
• Borewit/peek-readable#353
• Borewit/strtok3#533

[Borewit]

As there is no clear cause, I will close this issue.