search

sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.86k stars 4.24k forks source link

context/classes and store reactivity not updating synchronously in some cases leading to errors #14046

Open jjones315 opened 1 week ago

jjones315 commented 1 week ago

Describe the bug

When using stores and classes/context i am seeing errors with undefined data even with what i consider proper checks in place.

The demo is a touch convoluted but this has been minified from a fairly large app and changing too many variables caused errors to be less obvious.

To reproduce the store issue 1 go to the root of the site 2 Click "Go To Form Demo". 3 on the page click "Add Budget" 4 once the "table" appears click "Back" in the top right of the page. 5 notice the console errors, and clicking "Add Budget" again will result in a blank page.

To reproduce the context issue 1 go to the root of the site 2 Click "Go To Context Demo". 3 on the page click "Add Line" 4 once the "delete" and "approve" buttons appear click "Delete". 5 notice the console errors.

Some Notes.

Let me know if there is anything i can do to help, again sorry for the slightly more complex repro.

Reproduction

~https://github.com/jjones315/reproduction~

https://codesandbox.io/p/devbox/trusting-mestorf-dxzhmc

Logs

# Store
chunk-QXZRS4WV.js?v=79b2ec9b:1650 Uncaught TypeError: Cannot read properties of null (reading 'lines')
    at ProjectBudgetEntry.svelte:21:45
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
    at update_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1115:15)
    at Module.get (chunk-QXZRS4WV.js?v=79b2ec9b:2044:7)
    at get disabled (ProjectBudgetEntry.svelte:21:64)
    at Button.svelte:49:43
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
    at Module.get (chunk-QXZRS4WV.js?v=79b2ec9b:2000:17)
(anonymous) @ ProjectBudgetEntry.svelte:21
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
execute_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1098
update_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1115
get @ chunk-QXZRS4WV.js?v=79b2ec9b:2044
get disabled @ ProjectBudgetEntry.svelte:21
(anonymous) @ Button.svelte:49
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
execute_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1098
get @ chunk-QXZRS4WV.js?v=79b2ec9b:2000
$.spread_props.content @ Button.svelte:56
get @ chunk-P5MDH6DR.js?v=79b2ec9b:2869
getter @ chunk-P5MDH6DR.js?v=79b2ec9b:2986
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:3029
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
execute_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1098
update_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1115
get @ chunk-QXZRS4WV.js?v=79b2ec9b:2044
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:3059
untrack @ chunk-QXZRS4WV.js?v=79b2ec9b:2098
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:3059
set ref @ Tooltip.svelte:52
from_child @ chunk-P5MDH6DR.js?v=79b2ec9b:3016
(anonymous) @ bits-ui.js?v=79b2ec9b:38347
set current @ bits-ui.js?v=79b2ec9b:326
(anonymous) @ bits-ui.js?v=79b2ec9b:631
execute_effect_teardown @ chunk-QXZRS4WV.js?v=79b2ec9b:1326
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1386
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
(anonymous) @ chunk-QXZRS4WV.js?v=79b2ec9b:1411
run_out_transitions @ chunk-QXZRS4WV.js?v=79b2ec9b:1423
pause_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1410
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:541
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
update_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1805
process_effects @ chunk-QXZRS4WV.js?v=79b2ec9b:1932
flush_queued_root_effects @ chunk-QXZRS4WV.js?v=79b2ec9b:1863
process_deferred @ chunk-QXZRS4WV.js?v=79b2ec9b:1894
Show 94 more frames
Show lessUnderstand this error
ProjectBudgetEntry.svelte:21 Uncaught TypeError: Cannot read properties of null (reading 'lines')
    at ProjectBudgetEntry.svelte:21:45
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
    at update_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1115:15)
    at Module.get (chunk-QXZRS4WV.js?v=79b2ec9b:2044:7)
    at get disabled (ProjectBudgetEntry.svelte:21:64)
    at Button.svelte:49:43
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
    at Module.get (chunk-QXZRS4WV.js?v=79b2ec9b:2000:17)

# Context
chunk-QXZRS4WV.js?v=79b2ec9b:1650 Uncaught TypeError: Cannot read properties of undefined (reading 'description')
    at ActionCell.svelte:11:41
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
    at update_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1115:15)
    at check_dirtiness (chunk-QXZRS4WV.js?v=79b2ec9b:1628:11)
    at Module.get (chunk-QXZRS4WV.js?v=79b2ec9b:2043:9)
    at get disabled (ActionCell.svelte:24:47)
    at Button.svelte:49:43
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
(anonymous) @ ActionCell.svelte:11
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
execute_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1098
update_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1115
check_dirtiness @ chunk-QXZRS4WV.js?v=79b2ec9b:1628
get @ chunk-QXZRS4WV.js?v=79b2ec9b:2043
get disabled @ ActionCell.svelte:24
(anonymous) @ Button.svelte:49
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
execute_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1098
get @ chunk-QXZRS4WV.js?v=79b2ec9b:2000
$.spread_props.content @ Button.svelte:56
get @ chunk-P5MDH6DR.js?v=79b2ec9b:2869
getter @ chunk-P5MDH6DR.js?v=79b2ec9b:2986
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:3029
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
execute_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1098
update_derived @ chunk-QXZRS4WV.js?v=79b2ec9b:1115
get @ chunk-QXZRS4WV.js?v=79b2ec9b:2044
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:3059
untrack @ chunk-QXZRS4WV.js?v=79b2ec9b:2098
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:3059
set ref @ Tooltip.svelte:52
from_child @ chunk-P5MDH6DR.js?v=79b2ec9b:3016
(anonymous) @ bits-ui.js?v=79b2ec9b:38347
set current @ bits-ui.js?v=79b2ec9b:326
(anonymous) @ bits-ui.js?v=79b2ec9b:631
execute_effect_teardown @ chunk-QXZRS4WV.js?v=79b2ec9b:1326
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1386
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
destroy_effect_children @ chunk-QXZRS4WV.js?v=79b2ec9b:1347
destroy_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1377
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:636
run_out_transitions @ chunk-QXZRS4WV.js?v=79b2ec9b:1423
pause_effects @ chunk-P5MDH6DR.js?v=79b2ec9b:629
reconcile @ chunk-P5MDH6DR.js?v=79b2ec9b:860
(anonymous) @ chunk-P5MDH6DR.js?v=79b2ec9b:703
update_reaction @ chunk-QXZRS4WV.js?v=79b2ec9b:1714
update_effect @ chunk-QXZRS4WV.js?v=79b2ec9b:1805
process_effects @ chunk-QXZRS4WV.js?v=79b2ec9b:1932
flush_queued_root_effects @ chunk-QXZRS4WV.js?v=79b2ec9b:1863
process_deferred @ chunk-QXZRS4WV.js?v=79b2ec9b:1894
Show 100 more frames
Show lessUnderstand this error
ActionCell.svelte:11 Uncaught TypeError: Cannot read properties of undefined (reading 'description')
    at ActionCell.svelte:11:41
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)
    at update_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1115:15)
    at check_dirtiness (chunk-QXZRS4WV.js?v=79b2ec9b:1628:11)
    at Module.get (chunk-QXZRS4WV.js?v=79b2ec9b:2043:9)
    at get disabled (ActionCell.svelte:24:47)
    at Button.svelte:49:43
    at update_reaction (chunk-QXZRS4WV.js?v=79b2ec9b:1714:23)
    at execute_derived (chunk-QXZRS4WV.js?v=79b2ec9b:1098:15)

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900
    Memory: 7.91 GB / 31.70 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - ~\AppData\Roaming\npm\pnpm.CMD
    bun: 1.1.20 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: 5.0.4 => 5.0.4

Severity

annoyance

jjones315 commented 1 week ago

https://codesandbox.io/p/devbox/trusting-mestorf-dxzhmc

Simplified the repro a little bit. i have narrowed it down to the button component, removing the tooltip in the button or removing the attributes mechanism and just spreading resolves the issue.

in my full app i do have reasons for adding attributes like this, but i can work around it. although i think this is still a reasonable way to do things and it should work.