UModal error when opened

Question

UModal error when opened

slnw opened this issue 6 months ago · comments

Slaine Willey commented 6 months ago

Vue version

3.11.1

nuxt ui pro version - 1.1.0

Link to minimal reproduction

..

Steps to reproduce

<script setup>
const isActivateModalOpen = ref(true)
</script>
<template>
    <div>
        <UModal v-model="isActivateModalOpen">
            <div>hello</div>
        </UModal>
    </div>
</template>

What is expected?

to be opened

What is actually happening?

modal.vue?t=1711555870939:61 [Vue warn]: Unhandled error during execution of setup function 
  at <Dialog class="relative z-50" onClose=fn<onClose> ref=Ref< null > > 
  at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave>  ... > 
  at <Anonymous appear=false show=true as="template" > 
  at <Modal modelValue=true onUpdate:modelValue=fn > 
  at <Modal onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <Anonymous key="/modal" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/modal', hash: '', query: {…}, name: 'modal', path: '/modal', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <ClientOnly> 
  at <Default ref=Ref< Proxy(Object) {…} > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <Body class="antialiased" > 
  at <App key=3 > 
  at <NuxtRoot>
warn$1 @ chunk-2435C5CU.js?v=4f0a7977:1513
logError @ chunk-2435C5CU.js?v=4f0a7977:1717
handleError @ chunk-2435C5CU.js?v=4f0a7977:1709
callWithErrorHandling @ chunk-2435C5CU.js?v=4f0a7977:1662
setupStatefulComponent @ chunk-2435C5CU.js?v=4f0a7977:9060
setupComponent @ chunk-2435C5CU.js?v=4f0a7977:9021
mountComponent @ chunk-2435C5CU.js?v=4f0a7977:7352
processComponent @ chunk-2435C5CU.js?v=4f0a7977:7318
patch @ chunk-2435C5CU.js?v=4f0a7977:6784
componentUpdateFn @ chunk-2435C5CU.js?v=4f0a7977:7462
run @ chunk-2435C5CU.js?v=4f0a7977:430
instance.update @ chunk-2435C5CU.js?v=4f0a7977:7586
setupRenderEffect @ chunk-2435C5CU.js?v=4f0a7977:7596
mountComponent @ chunk-2435C5CU.js?v=4f0a7977:7364
processComponent @ chunk-2435C5CU.js?v=4f0a7977:7318
patch @ chunk-2435C5CU.js?v=4f0a7977:6784
componentUpdateFn @ chunk-2435C5CU.js?v=4f0a7977:7462
run @ chunk-2435C5CU.js?v=4f0a7977:430
instance.update @ chunk-2435C5CU.js?v=4f0a7977:7586
setupRenderEffect @ chunk-2435C5CU.js?v=4f0a7977:7596
mountComponent @ chunk-2435C5CU.js?v=4f0a7977:7364
processComponent @ chunk-2435C5CU.js?v=4f0a7977:7318
patch @ chunk-2435C5CU.js?v=4f0a7977:6784
componentUpdateFn @ chunk-2435C5CU.js?v=4f0a7977:7462
run @ chunk-2435C5CU.js?v=4f0a7977:430
instance.update @ chunk-2435C5CU.js?v=4f0a7977:7586
setupRenderEffect @ chunk-2435C5CU.js?v=4f0a7977:7596
mountComponent @ chunk-2435C5CU.js?v=4f0a7977:7364
processComponent @ chunk-2435C5CU.js?v=4f0a7977:7318
patch @ chunk-2435C5CU.js?v=4f0a7977:6784
mountChildren @ chunk-2435C5CU.js?v=4f0a7977:7032
mountElement @ chunk-2435C5CU.js?v=4f0a7977:6939
processElement @ chunk-2435C5CU.js?v=4f0a7977:6904
patch @ chunk-2435C5CU.js?v=4f0a7977:6772
componentUpdateFn @ chunk-2435C5CU.js?v=4f0a7977:7462
run @ chunk-2435C5CU.js?v=4f0a7977:430
instance.update @ chunk-2435C5CU.js?v=4f0a7977:7586
setupRenderEffect @ chunk-2435C5CU.js?v=4f0a7977:7596
mountComponent @ chunk-2435C5CU.js?v=4f0a7977:7364
processComponent @ chunk-2435C5CU.js?v=4f0a7977:7318
patch @ chunk-2435C5CU.js?v=4f0a7977:6784
componentUpdateFn @ chunk-2435C5CU.js?v=4f0a7977:7542
run @ chunk-2435C5CU.js?v=4f0a7977:430
instance.update @ chunk-2435C5CU.js?v=4f0a7977:7586
callWithErrorHandling @ chunk-2435C5CU.js?v=4f0a7977:1660
flushJobs @ chunk-2435C5CU.js?v=4f0a7977:1866
Promise.then (async)
queueFlush @ chunk-2435C5CU.js?v=4f0a7977:1775
queueJob @ chunk-2435C5CU.js?v=4f0a7977:1769
reload @ chunk-2435C5CU.js?v=4f0a7977:1976
(anonymous) @ chunk-2435C5CU.js?v=4f0a7977:2006
(anonymous) @ modal.vue?t=1711555870939:61
(anonymous) @ hmr.ts:77
(anonymous) @ hmr.ts:311
(anonymous) @ hmr.ts:277
queueUpdate @ hmr.ts:277
await in queueUpdate (async)
(anonymous) @ client.ts:199
handleMessage @ client.ts:197
(anonymous) @ client.ts:91
Show 57 more frames
Show less
modal.vue?t=1711555870939:61 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <Dialog class="relative z-50" onClose=fn<onClose> ref=Ref< null > > 
  at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave>  ... > 
  at <Anonymous appear=false show=true as="template" > 
  at <Modal modelValue=true onUpdate:modelValue=fn > 
  at <Modal onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <Anonymous key="/modal" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/modal', hash: '', query: {…}, name: 'modal', path: '/modal', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <ClientOnly> 
  at <Default ref=Ref< Proxy(Object) {…} > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <Body class="antialiased" > 
  at <App key=3 > 
  at <NuxtRoot>
warn$1 @ chunk-2435C5CU.js?v=4f0a7977:1513
logError @ chunk-2435C5CU.js?v=4f0a7977:1717
handleError @ chunk-2435C5CU.js?v=4f0a7977:1709
callWithErrorHandling @ chunk-2435C5CU.js?v=4f0a7977:1662
flushJobs @ chunk-2435C5CU.js?v=4f0a7977:1866
Promise.then (async)
queueFlush @ chunk-2435C5CU.js?v=4f0a7977:1775
queueJob @ chunk-2435C5CU.js?v=4f0a7977:1769
reload @ chunk-2435C5CU.js?v=4f0a7977:1976
(anonymous) @ chunk-2435C5CU.js?v=4f0a7977:2006
(anonymous) @ modal.vue?t=1711555870939:61
(anonymous) @ hmr.ts:77
(anonymous) @ hmr.ts:311
(anonymous) @ hmr.ts:277
queueUpdate @ hmr.ts:277
await in queueUpdate (async)
(anonymous) @ client.ts:199
handleMessage @ client.ts:197
(anonymous) @ client.ts:91
Show 16 more frames
Show less
chunk-AFNHHKK6.js?v=4f0a7977:2169 Uncaught (in promise) Error: You forgot to provide an `open` prop to the `Dialog`.
    at setup (chunk-AFNHHKK6.js?v=4f0a7977:2169:11)
    at callWithErrorHandling (chunk-2435C5CU.js?v=4f0a7977:1660:19)
    at setupStatefulComponent (chunk-2435C5CU.js?v=4f0a7977:9060:25)
    at setupComponent (chunk-2435C5CU.js?v=4f0a7977:9021:36)
    at mountComponent (chunk-2435C5CU.js?v=4f0a7977:7352:7)
    at processComponent (chunk-2435C5CU.js?v=4f0a7977:7318:9)
    at patch (chunk-2435C5CU.js?v=4f0a7977:6784:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-2435C5CU.js?v=4f0a7977:7462:11)
    at ReactiveEffect.run (chunk-2435C5CU.js?v=4f0a7977:430:19)
    at instance.update (chunk-2435C5CU.js?v=4f0a7977:7586:17)

System Info

System:
    OS: macOS 13.5.1
    CPU: (8) arm64 Apple M1
    Memory: 83.36 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.6.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 16.6

Any additional comments?

No response

Thorsten Lünborg · Answer 1 · Thu Mar 28 2024 01:36:16 GMT+0800 (China Standard Time)

We dont maintain nuxt ui. Please open an issue in their repo