Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Switching to Presenter view causes content to not render #1309

Closed
John-Goff opened this issue Feb 19, 2024 · 4 comments · Fixed by #1318
Closed

Switching to Presenter view causes content to not render #1309

John-Goff opened this issue Feb 19, 2024 · 4 comments · Fixed by #1318
Assignees
@KermanX
Labels
bug Something isn't working

Comments

@John-Goff
Copy link

John-Goff commented Feb 19, 2024 •
edited
Loading

Describe the bug
When switching to presenter mode, the page will stop responding and will render the layout with no content. Pressing the arrow keys will change the page number in the url, but the page will not rerender.

Screenshot 2024-02-19 at 11 32 46 AM

If I then switch back to Viewing mode, I get a fully black page

Screenshot 2024-02-19 at 11 36 39 AM

I found that this most often happens when I switch to Presenter mode after navigating a few pages first, but it has also happened on the first page. Sometimes refreshing the page will bring the content back, but other times I need to close the tab and reopen it.

This is on a freshly generated project with only the first slide modified.

To Reproduce
Steps to reproduce the behavior:

  1. Generate a new project with npm init slidev@latest
  2. Navigate a few pages to page 5 (or around there)
  3. Click the button for "Presenter mode"
  4. See the error

Desktop (please complete the following information):

  • OS: MacOS 14.2.1 (23C71)
  • Browser: Firefox 122.0.1 (64-bit)
  • Slidev version: Dependencies from package.json included below.
   "@slidev/cli": "^0.48.0-beta.2",
   "@slidev/theme-apple-basic": "^0.25.0",
   "@slidev/theme-default": "latest",
   "@slidev/theme-seriph": "latest",
   "vue": "^3.4.19"
  • Node version: v20.9.0
@KermanX
Copy link
Member

KermanX commented Feb 20, 2024 •
edited
Loading

I can't reproduce it in 0.48.0-beta.3. Could you upload what the browser console says?

@John-Goff
Copy link
Author

John-Goff commented Feb 20, 2024 •
edited
Loading

Updated to 0.48.0-beta.3 and was able to reproduce the same error. The following was logged to the console when going from view mode to presenter mode

[server-ref] [nav] outgoing 
Object { source: "fljsskg", data: Proxy, timestamp: 1708442650658 }
nav:17:12

Uncaught (in promise) DOMException: Node.removeChild: The node to be removed is not a child of this node
    unload index.mjs:5394
    createHook vue.esm-browser.js:4406
    callWithErrorHandling vue.esm-browser.js:1757
    callWithAsyncErrorHandling vue.esm-browser.js:1764
    __weh vue.esm-browser.js:4386
    flushPostFlushCbs vue.esm-browser.js:1930
    flushJobs vue.esm-browser.js:1968
    promise callback*queueFlush vue.esm-browser.js:1871
    queueJob vue.esm-browser.js:1865
    scheduler vue.esm-browser.js:3507
    resetScheduling vue.esm-browser.js:612
    triggerEffects vue.esm-browser.js:656
    triggerRefValue vue.esm-browser.js:1418
    set value vue.esm-browser.js:1463
    finalizeNavigation vue-router.mjs:3353
    pushWithRedirect vue-router.mjs:3218
    promise callback*pushWithRedirect vue-router.mjs:3185
    push vue-router.mjs:3110
    navigate vue-router.mjs:2196
    callWithErrorHandling vue.esm-browser.js:1757
    callWithAsyncErrorHandling vue.esm-browser.js:1764
    invoker vue.esm-browser.js:10275
    addEventListener vue.esm-browser.js:10229
    patchEvent vue.esm-browser.js:10244
    patchProp vue.esm-browser.js:10309
    mountElement vue.esm-browser.js:7008
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    componentUpdateFn vue.esm-browser.js:7500
    run vue.esm-browser.js:529
    update vue.esm-browser.js:7624
    setupRenderEffect vue.esm-browser.js:7634
    mountComponent vue.esm-browser.js:7402
    processComponent vue.esm-browser.js:7356
    patch vue.esm-browser.js:6835
    mountChildren vue.esm-browser.js:7083
    processFragment vue.esm-browser.js:7299
    patch vue.esm-browser.js:6809
    mountChildren vue.esm-browser.js:7083
    mountElement vue.esm-browser.js:6990
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    mountChildren vue.esm-browser.js:7083
    mountElement vue.esm-browser.js:6990
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    componentUpdateFn vue.esm-browser.js:7500
    run vue.esm-browser.js:529
    update vue.esm-browser.js:7624
    setupRenderEffect vue.esm-browser.js:7634
    mountComponent vue.esm-browser.js:7402
    processComponent vue.esm-browser.js:7356
index.mjs:5394:6
    <anonymous> nav.ts:21
    InterpretGeneratorResume self-hosted:1465
    AsyncFunctionThrow self-hosted:856
    (Async: async)
    triggerAfterEach vue-router.mjs:3325
    runWithContext vue.esm-browser.js:5500
    runWithContext vue-router.mjs:3237
    triggerAfterEach vue-router.mjs:3325
    forEach self-hosted:203
    triggerAfterEach vue-router.mjs:3325
    pushWithRedirect vue-router.mjs:3220
    (Async: promise callback)
    pushWithRedirect vue-router.mjs:3185
    push vue-router.mjs:3110
    navigate vue-router.mjs:2196
    callWithErrorHandling vue.esm-browser.js:1757
    callWithAsyncErrorHandling vue.esm-browser.js:1764
    invoker vue.esm-browser.js:10275
    (Async: EventListener.handleEvent)
    addEventListener vue.esm-browser.js:10229
    patchEvent vue.esm-browser.js:10244
    patchProp vue.esm-browser.js:10309
    mountElement vue.esm-browser.js:7008
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    componentUpdateFn vue.esm-browser.js:7500
    run vue.esm-browser.js:529
    update vue.esm-browser.js:7624
    setupRenderEffect vue.esm-browser.js:7634
    mountComponent vue.esm-browser.js:7402
    processComponent vue.esm-browser.js:7356
    patch vue.esm-browser.js:6835
    mountChildren vue.esm-browser.js:7083
    processFragment vue.esm-browser.js:7299
    patch vue.esm-browser.js:6809
    mountChildren vue.esm-browser.js:7083
    mountElement vue.esm-browser.js:6990
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    mountChildren vue.esm-browser.js:7083
    mountElement vue.esm-browser.js:6990
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    componentUpdateFn vue.esm-browser.js:7500
    run vue.esm-browser.js:529
    update vue.esm-browser.js:7624
    setupRenderEffect vue.esm-browser.js:7634
    mountComponent vue.esm-browser.js:7402
    processComponent vue.esm-browser.js:7356

Which ended up at the white screen in the screenshot above, and the following was logged when I had refreshed the page in presenter mode (so presenter mode was working properly) and clicked the button to go into view mode

[Vue warn]: Unhandled error during execution of unmounted hook 
  at <Tweet id="1390115482657726468" scale="0.65" > 
  at <Default class="slidev-page slidev-page-6 overflow-hidden" > 
  at <6 class="slidev-page slidev-page-6 overflow-hidden" > 
  at <SlideWrapper key="6" is= 
Object { __name: "6", setup: setup(__props), __hmrId: "2abe3208", render: _sfc_render(_ctx, _cache, $props, $setup, $data, $options), __file: "/@slidev/slides/6.md" }
 clicks-context= 
Object { disabled: Getter, current: Getter, relativeOffsets: Map(0), map: Proxy, resolve: resolve(at, size), register: register(el, resolved), unregister: unregister(el), currentOffset: Getter, total: Getter }
  ... > 
  at <TransitionGroup id="slideshow" tag="div" onAfterLeave=fn<onAfterLeave> > 
  at <SlidesShow render-context="presenter" > 
  at <SlideContainer key="main" class="h-full w-full" > 
  at <Presenter onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App> vue.esm-browser.js:1611:12

[server-ref] [nav] outgoing 
Object { source: "hwzcxsba", data: Proxy, timestamp: 1708442823772 }
nav:17:12

Uncaught (in promise) DOMException: Node.removeChild: The node to be removed is not a child of this node
    unload index.mjs:5394
    createHook vue.esm-browser.js:4406
    callWithErrorHandling vue.esm-browser.js:1757
    callWithAsyncErrorHandling vue.esm-browser.js:1764
    __weh vue.esm-browser.js:4386
    flushPostFlushCbs vue.esm-browser.js:1930
    flushJobs vue.esm-browser.js:1968
    promise callback*queueFlush vue.esm-browser.js:1871
    queueJob vue.esm-browser.js:1865
    scheduler vue.esm-browser.js:3507
    resetScheduling vue.esm-browser.js:612
    triggerEffects vue.esm-browser.js:656
    triggerRefValue vue.esm-browser.js:1418
    set value vue.esm-browser.js:1463
    finalizeNavigation vue-router.mjs:3353
    pushWithRedirect vue-router.mjs:3218
    promise callback*pushWithRedirect vue-router.mjs:3185
    push vue-router.mjs:3110
    navigate vue-router.mjs:2196
    callWithErrorHandling vue.esm-browser.js:1757
    callWithAsyncErrorHandling vue.esm-browser.js:1764
    invoker vue.esm-browser.js:10275
    addEventListener vue.esm-browser.js:10229
    patchEvent vue.esm-browser.js:10244
    patchProp vue.esm-browser.js:10309
    mountElement vue.esm-browser.js:7008
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    componentUpdateFn vue.esm-browser.js:7500
    run vue.esm-browser.js:529
    update vue.esm-browser.js:7624
    setupRenderEffect vue.esm-browser.js:7634
    mountComponent vue.esm-browser.js:7402
    processComponent vue.esm-browser.js:7356
    patch vue.esm-browser.js:6835
    mountChildren vue.esm-browser.js:7083
    processFragment vue.esm-browser.js:7299
    patch vue.esm-browser.js:6809
    mountChildren vue.esm-browser.js:7083
    mountElement vue.esm-browser.js:6990
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    mountChildren vue.esm-browser.js:7083
    mountElement vue.esm-browser.js:6990
    processElement vue.esm-browser.js:6955
    patch vue.esm-browser.js:6823
    componentUpdateFn vue.esm-browser.js:7500
    run vue.esm-browser.js:529
    update vue.esm-browser.js:7624
    setupRenderEffect vue.esm-browser.js:7634
    mountComponent vue.esm-browser.js:7402
    processComponent vue.esm-browser.js:7356
index.mjs:5394:6

This then ended up in the black screen pictured above.

@KermanX
Copy link
Member

KermanX commented Feb 21, 2024 •
edited
Loading

I found this is a Firefox-only issue with the Tweet component. I am not sure what caused this. I think the issue is the same as vueuse/vueuse#2027. I will try to fix this later.

@KermanX KermanX added the bug Something isn't working label Feb 21, 2024
@KermanX KermanX self-assigned this Feb 21, 2024
KermanX added a commit to KermanX/slidev that referenced this issue Feb 21, 2024
@KermanX
fix: multiple Tweet component (slidevjs#1309)
9d87dc9
@KermanX KermanX mentioned this issue Feb 21, 2024
Merged
antfu pushed a commit that referenced this issue Feb 21, 2024
@KermanX
fix: multiple Tweet component (#1309) (#1318)
be807d4
@John-Goff
Copy link
Author

Confirming the issue's fixed with 0.48.0-beta.5, thanks for the quick fixes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@KermanX KermanX

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: multiple Tweet component (#1309) KermanX/slidev
2 participants
@John-Goff @KermanX