"chunkFilename.replace is not a function" on webpack 5

[ctf0]

• Operating System: OSX 10.15.7
• Node Version: 15.4.0
• NPM Version: 6.14.9
• webpack Version: 5.11.0
• worker-loader Version: 3.0.7

Expected Behavior

should work same as it did with wp v4

Actual Behavior

on v5 we are getting this error

ERROR in ./resources/assets/vendor/MediaManager/js/webworkers/audio.js (./node_modules/worker-loader/dist/cjs.js!./resources/assets/vendor/MediaManager/js/webworkers/audio.js)
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: chunkFilename.replace is not a function
    at getDefaultChunkFilename (/Users/xxx/demos/node_modules/worker-loader/dist/utils.js:23:24)
    at Object.pitch (/Users/xxx/demos/node_modules/worker-loader/dist/index.js:61:108)

Code

using laravel-mix

make no difference really, also wasnt required on v4

mix.webpackConfig({
    module: {
        rules: [
            {
                test : /\.worker\.js$/,
                use  : {loader: 'worker-loader'}
            }
        ]
    }
})

• audio.js

const musicMetadata = require('music-metadata-browser')

self.addEventListener('message', (e) => {
    let url = e.data

    musicMetadata.fetchFromUrl(url)
        .then((val) => {
            let res = val.common
            let picture = res.picture

            self.postMessage({
                artist: res.artist,
                title: res.title,
                cover: picture
                    ? URL.createObjectURL(new Blob([picture[0].data.buffer]))
                    : null
            })
        })
})

• somewhere_else.js

import AudioWorker from 'worker-loader!../webworkers/audio'

const audio = new AudioWorker()
audio.addEventListener('message', ({data}) => {
    this.audioFileMeta = data
})
audio.postMessage(url)

[alexander-akait]

You don't need this loader with webpack@5

[ctf0]

@alexander-akait can u plz elaborate ?

[alexander-akait]

https://github.com/webpack/webpack/tree/master/examples/worker, example how use web workers without worker-loader for webpack@5

[ctf0]

using the example, the error are gone but so does the functionality aswell, the above code no longer works.

here how the above look now

• audio.js

const musicMetadata = require('music-metadata-browser')

onconnect = function (e) {
    for (const port of e.ports) {
        port.onmessage = (e) => {
            let url = e.data

            musicMetadata
                .fetchFromUrl(url)
                .then((val) => {
                    let res     = val.common
                    let picture = res.picture

                    port.postMessage({
                        artist      : res.artist,
                        title       : res.title,
                        cover       : picture
                            ? URL.createObjectURL(new Blob([picture[0].data.buffer]))
                            : null
                    })
                })
        }
    }
}

• somewhere_else.js

const AudioWorker = new SharedWorker(
    new URL('../webworkers/audio.js', import.meta.url),
    {
        name: 'audio'
    }
)

AudioWorker.port.onmessage = ({data}) => {
    this.audioFileMeta = data
}
AudioWorker.port.postMessage(url)

[ctf0]

finally got it working, we should use new Worker instead.

thanks alot for the example & the headsup, merry Christmas btw 🎊