vue-filepond

vue-filepond copied to clipboard

Summary

Filepond keeps generating console errors like the following:

Uncaught TypeError: self.postMessage is not a function
    at sendMsg (app.js:162085)
    at Object.invalid (app.js:161498)
    at app.js:161803
    at SockJS.sock.onmessage (app.js:161415)
    at SockJS.EventTarget.dispatchEvent (app.js:108657)
    at app.js:109375
    at Array.forEach (<anonymous>)
    at SockJS._transportMessage (app.js:109373)
    at WebSocketTransport.EventEmitter.emit (app.js:108573)
    at WebSocketTransport.ws.onmessage (app.js:111449)

How to reproduce

Fairly simple usage of filepond: https://gist.github.com/modernpk/16e61547332ed8eae016483caad63bf9

Expected behaviour

I am using hot reload, which is breaking because of these console errors. If I remove the filepond, everything seems working as expected.

Additional information

Environment	Version
OS	Windows 10
Browser	Version 81.0.4044.122 (Official Build) (64-bit)

It sounds like a build script might be messing up the WebWorker functions.

These calls:

Maybe there's a way to exclude FilePond and its plugins from this?

@rikschennink I have no idea, do you?

@modernpk happy to take a look at a public test case

@rikschennink thanks for your quick response. I fixed it by redefined self (using let keyword, e.g let self = this instead of self = this). It has nothing to do with filepond.

@rikschennink I am facing the same issues again and I realized it is happening only when I run npm run hot (hot reload). So whenever I save the vue file and then it tries to reload the page that's when this error comes in the console and the page fails to reload.

@themodernpk I honestly don't know why that would happen, I'm all ears. The WebWorkers are created dynamically so maybe the hot reload messes with references to these dynamic web workers.