Bug with in-browser implementation
See original GitHub issueI’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!
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Implement tabHide support in browser.tabs - Bugzilla@Mozilla
Bugs about front end APIs and interaction such as buttons, tabs, windows, popups. See Open Bugs in This Component · Recently Fixed Bugs...
Read more >816628 - [DIAL] implement in-browser custom DIAL launch
Issue 816628 : [DIAL] implement in-browser custom DIAL launch ... This bug requires manual review: Reverts referenced in bugdroid comments ...
Read more >The pain and anguish of using IndexedDB: problems, bugs ...
Out of the major browsers, Chrome's IndexedDB implementation is the best. Backing file on disk (WAL file) keeps growing (Safari). When this bug...
Read more >Bug with Chrome's localStorage implementation?
Further to this question, I'm getting a curious result when binding a function to the change event of the Storage object in Chrome...
Read more >JavaScript Error Recorder Lets Users Report Bugs in Browser
Bogomil Shopov and Robert Nyman have announced The Usersnap Console Recorder, a browsable JavaScript error- and XHR-logs recorder that is ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Any difference using:
?
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:)
As there is no clear cause, I will close this issue.