Open AnnikenYT opened 2 years ago
Hey! Could you post the full stacktrace? :)
Sure! Sorry, didnt look at this issue for a while 😅 Here, this is the full stacktrace, doubt its of much use tho...
Uncaught (in promise) TypeError: can't access property "insertBefore", parent is null
insert runtime-dom.esm-bundler.js:10
mountElement runtime-core.esm-bundler.js:5195
processElement runtime-core.esm-bundler.js:5115
patch runtime-core.esm-bundler.js:5035
patchBlockChildren runtime-core.esm-bundler.js:5355
patchElement runtime-core.esm-bundler.js:5263
processElement runtime-core.esm-bundler.js:5118
patch runtime-core.esm-bundler.js:5035
componentUpdateFn runtime-core.esm-bundler.js:5660
run reactivity.esm-bundler.js:185
update runtime-core.esm-bundler.js:5694
updateComponent runtime-core.esm-bundler.js:5519
processComponent runtime-core.esm-bundler.js:5452
patch runtime-core.esm-bundler.js:5038
componentUpdateFn runtime-core.esm-bundler.js:5660
run reactivity.esm-bundler.js:185
update runtime-core.esm-bundler.js:5694
callWithErrorHandling runtime-core.esm-bundler.js:155
flushJobs runtime-core.esm-bundler.js:396
promise callback*queueFlush runtime-core.esm-bundler.js:285
queueJob runtime-core.esm-bundler.js:279
effect runtime-core.esm-bundler.js:5692
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1131
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1131
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1044
finalizeNavigation vue-router.mjs:3307
pushWithRedirect vue-router.mjs:3180
promise callback*pushWithRedirect vue-router.mjs:3151
push vue-router.mjs:3078
0 PlaylistEntry.vue:5
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
invoker runtime-dom.esm-bundler.js:369
Hum, weird indeed. Can you make sure to upgrade your vue version to latest?
Do you have some live example so I can reproduce it myself easily?
any updates on this?
Hey, sorry, Just had a look! Nice video btw 😂🙈
I think this might be a vuejs issue https://github.com/vuejs/core/issues/5657
Ah, I see. Ok, Is there any other way to reactively update the video? Everything else I saw so far didn't really work...
Gonna try that, thanks
Hi, I didn't use reactivity to change the video, but using source setter in plyr example https://github.com/sampotts/plyr?tab=readme-ov-file#the-source-setter. In my case I also need to start the video immediately after it changes, so I call play method inside on ready events https://github.com/sampotts/plyr#events. Here is my example, hope it helps
<script setup>
onMounted(() => {
plyr.value.player.on('ready', (e) => {
plyr.value.player.play()
})
})
const changeVideo = (videoId: string) => {
plyr.value.player.source = {
type: 'video',
sources: [
{
src: videoId,
provider: 'youtube',
},
],
}
}
</script>
<template>
<vue-plyr ref="plyr">
<div data-plyr-provider="youtube" data-plyr-embed-id="tPEE9ZwTmy0" />
</vue-plyr>
<button @click="changeVideo('dCxSsr5xuL8')" />
</template>
Hi, ive already posted a comment on the "old" repo, but seeing that it had little to no activity over the last 2 years ill ask here again :) Essentially, I have this simple template:
Now,
vid
changes, and the entire app pretty much breaks. I get this error in console:I've isolated the issue to this component. Any help is appreciated :)