-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
vue + hls.js bug , Uncaught TypeError: Cannot read properties of undefined (reading 'call') #5146
Comments
I fixed this bug, import Hls from 'hls.js/dist/hls.min' I can't understand why such a bug occurs. |
Having a similar issue on a sveltekit + vite project. It is fine in Your fix works, we've also found another fix by passing the These however are not satisfactory fixes, could this issue be reopened? |
of course |
@nostrorom Here is my response to the current state of worker injection #5107 (comment) I reopened this issue because @ba0gu0 provided excellent steps to reproduce with a specific build setup. If you'd like any work to be verified against your own setup please do the same. #5107 will be used to track enhancing the API to allow for a customer Worker URL to be provided to bypass injection (especially useful if you are rebundling HLS.js). Either way, you should not need to set |
@robwalch Many thanks for your reply. I will test around in my project and follow the issues you linked. If I still I have issues I will provide steps to reproduce the bug in my own case. Cheers :) |
I'm facing this same issue using React + vite, the error started to show when i upgraded vite from 3.0.0 to the latest 4.0.4. 890d857a-de01-4981-acb1-e2af111b1ecd:187 Uncaught TypeError: Cannot read properties of undefined (reading 'call') Changing my hls import like @ba0gu0 did solved the issue:
|
For this to work with nuxt 3.2.2 I had to add 'hls.js/dist/hls.min.js' to vite.optimizeDeps.include in nuxt.config.ts, in case this might help someone or to resolve this issue. |
While using As I am using vitejs, it was easier to keep the import as "hls.js" and then adding an alias to the vite.config.js with |
When you import from "hls.js" you get the main package and type definitions as they are declared in the package.json: https://github.com/video-dev/hls.js/blob/v1.3.3/package.json#L14-L15
When switching to a specific dist file like hls.min.js, you need to tell TypeScript where to find the type definitions: hls.js.d.ts. Thanks and sorry for having putting up with this. There's been discussion about how to address worker instantiation without increasing payload size while keeping it effortless (#2910 and #5107). JavaScript optimization settings shouldn't get in the way as they do now with webworkify-webpack.js, and you shouldn't have to loose your TypeScript bindings or manually import type defs to get around this issue. |
Thanks for this tip, it was much more elegant than my hacky workaround: // https://github.com/video-dev/hls.js/issues/5146#issuecomment-1375070955
import type HlsType from 'hls.js'
import HlsMin from 'hls.js/dist/hls.min'
const Hls = HlsMin as typeof HlsType |
Hello! Version 1.4 is in beta now. We've switched from webpack to rollup for packaging. The library now includes ES module output with "hls.mjs", and a separate worker script "hls.worker.js" which you can point to via Please give it a try an provide feedback. If you are still running into issues with this release let us know and consider providing a sample we can use to reproduce the issue: https://github.com/video-dev/hls.js/releases/tag/v1.4.0-beta.2 Thanks 👋 |
@robwalch I just did a quick test with v1.4.0-beta.2, worked fine in both dev and build mode, with no need for my vite.config.js "hack"! 🙂 |
Tried it today also, it works great 👍 |
What version of Hls.js are you using?
1.2.9
What browser (including version) are you using?
Chrome/FixFox/Edge
What OS (including version) are you using?
Macos 13.1/windows11
Test stream
https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
Configuration
Additional player setup steps
I wrote a simple demo, also have problems.
Checklist
Steps to reproduce
yarn create vite hlsTest --template vue
cd hlsTest && yarn install && yarn add hls.js
Expected behaviour
Buffer video and play
What actually happened?
Console output
Chrome media internals output
The text was updated successfully, but these errors were encountered: