Uncaught (in promise) Svelte error: props_invalid_value Cannot do `bind:ref={undefined}` when `ref` has a fallback value #3625

babakfp · 2025-09-17T07:47:06Z

babakfp
Sep 17, 2025

Hi 👋😊

Uncaught (in promise) Svelte error: props_invalid_value
Cannot do `bind:ref={undefined}` when `ref` has a fallback value
https://svelte.dev/e/props_invalid_value

	in <unknown>
	in factory.svelte
	in dialog-positioner.svelte
	in undefined

    at props_invalid_value (chunk-CKLZYE3P.js?v=91d3514c:404:19)
    at prop (chunk-WG7HHNVF.js?v=91d3514c:3704:18)
    at Dialog_content (@ark-ui_svelte_dialog.js?v=91d3514c:184:13)
    at chunk-WG7HHNVF.js?v=91d3514c:319:58
    at update_reaction (chunk-CKLZYE3P.js?v=91d3514c:2962:18)
    at update_effect (chunk-CKLZYE3P.js?v=91d3514c:3092:21)
    at create_effect (chunk-CKLZYE3P.js?v=91d3514c:2458:7)
    at branch (chunk-CKLZYE3P.js?v=91d3514c:2614:10)
    at chunk-WG7HHNVF.js?v=91d3514c:313:17
    at update_reaction (chunk-CKLZYE3P.js?v=91d3514c:2962:18)
props_invalid_value @ chunk-CKLZYE3P.js?v=91d3514c:404
prop @ chunk-WG7HHNVF.js?v=91d3514c:3704
Dialog_content @ @ark-ui_svelte_dialog.js?v=91d3514c:184
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:319
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:313
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
wrapper @ chunk-WG7HHNVF.js?v=91d3514c:306
(anonymous) @ SideDrawer.svelte:39
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1455
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1455
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
component @ chunk-WG7HHNVF.js?v=91d3514c:1443
$.add_svelte_meta.componentTag @ SideDrawer.svelte:34
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
(anonymous) @ SideDrawer.svelte:34
snippet2 @ chunk-WG7HHNVF.js?v=91d3514c:1386
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1374
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1372
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
snippet @ chunk-WG7HHNVF.js?v=91d3514c:1363
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1252
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1252
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1540
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1509
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
element @ chunk-WG7HHNVF.js?v=91d3514c:1489
alternate @ chunk-7RFRLRH5.js?v=91d3514c:1243
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:652
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
update_branch @ chunk-WG7HHNVF.js?v=91d3514c:652
set_branch @ chunk-WG7HHNVF.js?v=91d3514c:607
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1266
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:673
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
if_block @ chunk-WG7HHNVF.js?v=91d3514c:671
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1262
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
alternate_1 @ chunk-7RFRLRH5.js?v=91d3514c:1261
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:652
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
update_branch @ chunk-WG7HHNVF.js?v=91d3514c:652
set_branch @ chunk-WG7HHNVF.js?v=91d3514c:607
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1283
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:673
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
if_block @ chunk-WG7HHNVF.js?v=91d3514c:671
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1279
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
alternate_2 @ chunk-7RFRLRH5.js?v=91d3514c:1278
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:652
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
update_branch @ chunk-WG7HHNVF.js?v=91d3514c:652
set_branch @ chunk-WG7HHNVF.js?v=91d3514c:607
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1298
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:673
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
if_block @ chunk-WG7HHNVF.js?v=91d3514c:671
(anonymous) @ chunk-7RFRLRH5.js?v=91d3514c:1296
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
Factory @ chunk-7RFRLRH5.js?v=91d3514c:1295
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:319
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:313
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
wrapper @ chunk-WG7HHNVF.js?v=91d3514c:306
add_svelte_meta.componentTag @ @ark-ui_svelte_dialog.js?v=91d3514c:325
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
consequent @ @ark-ui_svelte_dialog.js?v=91d3514c:324
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:650
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
update_branch @ chunk-WG7HHNVF.js?v=91d3514c:650
set_branch @ chunk-WG7HHNVF.js?v=91d3514c:607
(anonymous) @ @ark-ui_svelte_dialog.js?v=91d3514c:344
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:673
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
if_block @ chunk-WG7HHNVF.js?v=91d3514c:671
(anonymous) @ @ark-ui_svelte_dialog.js?v=91d3514c:343
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
Dialog_positioner @ @ark-ui_svelte_dialog.js?v=91d3514c:342
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:319
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:313
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
wrapper @ chunk-WG7HHNVF.js?v=91d3514c:306
(anonymous) @ SideDrawer.svelte:34
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1455
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-WG7HHNVF.js?v=91d3514c:1455
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
block @ chunk-CKLZYE3P.js?v=91d3514c:2607
component @ chunk-WG7HHNVF.js?v=91d3514c:1443
$.add_svelte_meta.componentTag @ SideDrawer.svelte:34
add_svelte_meta @ chunk-CKLZYE3P.js?v=91d3514c:511
(anonymous) @ SideDrawer.svelte:34
snippet2 @ chunk-WG7HHNVF.js?v=91d3514c:1386
(anonymous) @ chunk-MKVVRVES.js?v=91d3514c:667
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
branch @ chunk-CKLZYE3P.js?v=91d3514c:2614
(anonymous) @ chunk-MKVVRVES.js?v=91d3514c:647
update_reaction @ chunk-CKLZYE3P.js?v=91d3514c:2962
update_effect @ chunk-CKLZYE3P.js?v=91d3514c:3092
create_effect @ chunk-CKLZYE3P.js?v=91d3514c:2458
component_root @ chunk-CKLZYE3P.js?v=91d3514c:2544
_mount @ chunk-MKVVRVES.js?v=91d3514c:645
mount @ chunk-MKVVRVES.js?v=91d3514c:564
(anonymous) @ @ark-ui_svelte_portal.js?v=91d3514c:53

ark/packages/svelte/src/lib/components/dialog/dialog-content.svelte

Line 16 in fd6d299

let { ref = $bindable(null), ...props }: DialogContentProps = $props()

Is there a solution for this?

I know that there was a time that I myself needed to add a default value to a $bindable() because I was getting an error and because of stupid reasons and stupid ways that Svelte 5 works. So, I don't really know if the issue is from my side or Ark side, and that if Ark deletes the default value there isn't going to be another issue!

What I'm doing in my code is, I use both https://ark-ui.com/docs/components/dialog and https://www.bits-ui.com/docs/components/context-menu. I have built a drawer with the dialog component and inside it I'm using a context-menu. I want to portal the context-menu content inside the dialog. So, on context-menu I use the to prop <ContextMenu.Portal {to}> and I bind the bind:ref of Dialog.Content to a prop then it gets passed to the to prop...

segunadebayo · 2025-09-17T13:25:41Z

segunadebayo
Sep 17, 2025
Maintainer

Hard to tell without a reproduction.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uncaught (in promise) Svelte error: props_invalid_value Cannot do `bind:ref={undefined}` when `ref` has a fallback value #3625

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uncaught (in promise) Svelte error: props_invalid_value Cannot do bind:ref={undefined} when ref has a fallback value #3625

Uh oh!

Uh oh!

babakfp Sep 17, 2025

Replies: 1 comment

Uh oh!

segunadebayo Sep 17, 2025 Maintainer

Uncaught (in promise) Svelte error: props_invalid_value Cannot do `bind:ref={undefined}` when `ref` has a fallback value #3625

babakfp
Sep 17, 2025

segunadebayo
Sep 17, 2025
Maintainer