SSR broken in HLS 1.4.12 and Next 13

[jordizle]

What version of Hls.js are you using?

1.4.12

What browser (including version) are you using?

Chrome Version 116.0.5845.140 (Official Build) (arm64)

What OS (including version) are you using?

Mac OS Ventura 13.4.1

Test stream

https://github.com/jordizle/next-13-hls-1.4.12

Configuration

{}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hlsjs.video-dev.org/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. clone https://github.com/jordizle/next-13-hls-1.4.12
2. npm run dev
3. Check console

Expected behaviour

No console errors.

What actually happened?

Console error

Console output

⨯ node_modules/hls.js/dist/hls.mjs (397:0) @ enableLogs
 ⨯ ReferenceError: self is not defined
    at RootLayout (./app/layout.tsx:8:5)

Chrome media internals output

No response

[robwalch]

HLS.js uses self for access to global browser api rather than window for compatibility in web worker contexts.

If you are running HLS.js in another JavaScript runtime that doesn't define self, then define it in your app.

Also consider providing more context for your application and JS runtime. Is there another workaround or solution to accessing browser globals that you are expecting?

[robwalch]

@jordizle,

Let me know if #5936 resolves the issue for you.

[jordizle]

@robwalch What is the best way to test this locally? Clone the branch and run a build or is there a build/version somewhere I can install via npm?

[robwalch]

Only merged commits and commits with a version tag are published to npm. If you could, please clone the branch or pr/number and npm link.