Bug: hls.js workerPath for webpack V5

[scmilee]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

playback-core

Which browsers are you using?

Chrome

Which operating systems are you using?

macOS

Description

Preface: this only happens in built/packed environments, local servers don't run into this issue.

hls-js uses a web worker if it can for muxing and as of hls-js 1.4.X, the library now ships with an ESM version and webpack v5 will by default grab the ESM dist instead of the raw worker that we need to be executing.
This causes the worker to fail after grabbing the first chunk of the video and for preload='metadata' on chrome that means our first playbacks were consistently 270p (level 0), even if initially the first rendition was 720p (level 2).
.

We use mux-player-react for our site, but I imagine this affects anyone using playback-core and webpack v5 +.

The solution for us was to eject the worker file during packing and pass in the absolute path to the hlsConfig for the mux-player.

           new CopyWebpackPlugin({
                patterns: [
                    {
                        from: path.resolve(__dirname, `${paths.appNodeModules}/hls.js/dist/hls.worker.js`),
                        to: path.resolve(__dirname, `../build/hls.worker.js`)
                    }
                ]
            })

       hlsConfig={{ debug: false, workerPath: '/hls.worker.js' }}

Reduced test case

No response

Steps to reproduce

1. install mux-player-react into a site packaged with webpack v5.
2. turn on debug logging for hls.
3. load a video with preload of metadata on chrome to get the cleanest logs since it just loads 1 chunk.
4. watch the worker error and cap level drop to 0, and subsequent refetch of chunk 0 at level 0.

Current Behavior

playback-core/hls.js performance is degraded when using webpack v5

Expected Behavior

I'm not sure if the solution would be to just update documentation to reflect this interaction or if there's something clever you all could come up with to do this by default, but I'd bet there's quite a few consumers of this library that are using webpack and are quite confused with the first chunk issues (at least in browser that support web workers)

Errors

No response

What version of the package are you using?

No response

[scmilee]

Here's their migration note on the subject as well.