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.
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
<Todo bind:this={todo.ref} ... /> leads to undefined when todos array is mutated #11272
Comments
This also kinda explain why position matters. At Not sure if this is still a bug tho. |
Thanks a lot for spotting this! We can of course provide a unique key when that solves the issue. Still, I guess I'd expect this to work without providing a key too (with less efficient reconciliation). So leaving this open for the Svelte team to decide if there's action needed (could be a fix, or a warning?). Attaching our Twitter discussion for context: https://twitter.com/PaoloRicciuti/status/1782036498780414003 |
The behavior is the same in Svelte 4, it doesn't work there, too. I'm inclined to mark this as "works as designed". The reason is that the each array by default is checking the array index for whether or not the whole thing needs to be recreated. Since the indexes only increase, the existing ones never change and so |
Describe the bug
While initially all
todo.ref
class fields are set properly, as soon as I mutate thetodos
array (e.g. when doingtodos.splice(1,0, new Todo('Clean toilet'))
thetodo.ref
is undefined. I had a really hard time reproducing this, as for other indexes it works (like when I dotodos.push(new Todo('Clean toilet'))
.Reproduction
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE51UwY7bOAz9FcJbwA4Q2N1rmgx221MPu5ddoIfJoNVYdKyOQhkSPdnC8L8vKNlOMkinRQ9JFOqRIh8fOWSNsRiyzf2QkTpitsn-7LpsnfG3Tv6EZ7SM2ToLrve1WLah9qbjuz3t2Rw75xn-ddr95TRaaLw7Ql5Wi6VMAcqvIX_3wuMKPOGuQAOwqZ9gTMD9lMs-ixj5WGRgp12AHbwJrBiL-3jHhKdzVkX-SYUWtAkthny1vg0xHUJjnfPfQ7z3hg7gegb2KrT5SlAPK8mG9qzCN6qh6alm4wiU1p8JT58lvWIFQ4pYVWAooI-QzgUjh3RVOwosNtjB7--gqqA4GW7Fsos1lhbpwC0YhpPzT0EeBoBEQBk6a2oskgnEaz2f3y6nFwV9sKgI2BmLHIsWzCqxy-lbnZTh2IZiFZOK_3tiY4FbhLpVdEBoVYDOu04dFKMGRRpqd-wcIXGAVj0jPCISeCSNHvXCxj-I8GhIb7g1YTdILaXHZgRDcCGLM0XOYmndociX-OCxAddAY3xIctjk68TK_dsHiVa2aK0rVnNpVQXyHKD3zgd4xFr1ASeXzoXoBCZATxobQ3O-r78v5EoIMOGcwBztOoVxT9vqPEa0feyZHYGj2pr6aTdcqme8-yDGbZVAd3safkNVt5PyVYiHNZhRQm_jZEUiR6gEXAl43FO2zo5Om8agzjbsexzXy8iL0y_M_Cevug791SBPtlvz_JEI_dXkL5YreBqFIbE5ymyLtkIh5F3zdvFgzG2bwmzOzUm6Wt4ZZ2puiq66E91vq-uwPyLucs-dSfwaLgnE_yIDGhvVW4baqhDSEoybQaKdd1ieJ5mIsF4aZ3p8X7PzhTgu20XKKadQ8jNrbXytgoWaX-j_9zf4ay2U-4mPZV1O4zFX4pF7T_AlmtMrb1KfJOvxy-0p0uY5Zvi3OuIGLvAClMsfdXLq-c8yMRdZt8Zqj_S6VidposXjWZi5Ns_5GKMNf6TtuIQrVqnCK78bNTyM_wMV3w_ixQcAAA==
Logs
running Svelte compiler version 5.0.0-next.110 103Fetch finished loading: GET "<URL>". VM351 about:srcdoc:96 component ref of first todo: hello from Wash dishes playground:output:3492 Uncaught (in promise) TypeError: todos[pos].ref.hello is not a function at HTMLButtonElement.add_new_todo (playground:output:3492:63)
System Info
System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M2 Memory: 107.00 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.10.0 - /usr/local/bin/node npm: 10.2.3 - /usr/local/bin/npm Browsers: Chrome: 124.0.6367.62 Safari: 17.2.1 npmPackages: svelte: 5.0.0-next.110 => 5.0.0-next.110
Severity
blocking all usage of svelte
The text was updated successfully, but these errors were encountered: