svelte
svelte copied to clipboard
A rare bind value bug sets the value to null when it is not bind in parent
Describe the bug
I found a rare bug with multiple conditions that sets a variable that always exists to null when the parent of the children doesn't specify a bind: on that variable when passed to a child.
Look at the repo (and the console), it has a list of nested children and depended variables that cause this to happen, if one of the conditions is missing the value does not get set to null even if the bind: is missing.
Reproduction
https://stackblitz.com/~/github.com/zommerberg/sveltekit-bind-bug
https://github.com/zommerberg/sveltekit-bind-bug
I've reproduced it as closely as possible to my real project.
Logs
No response
System Info
System:
OS: Windows 11 10.0.22631
CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
Memory: 17.99 GB / 29.85 GB
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.22621.1
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.2.0
@sveltejs/kit: ^2.0.0 => 2.5.7
@sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.0
svelte: ^4.2.7 => 4.2.15
vite: ^5.0.3 => 5.2.11
Severity
serious, but I can work around it
Additional Information
No response
The value of myObjectItem
in <ComponentBody>
is currently set to the prop fallback value of <ComponentChild>
because of the binding. Hence, the value passed from the page to <ComponentBody>
is overwritten by that binding.
@eltigerchino The fallback should not be used at all since the object is defined at all time. Its weird that it uses a fallback and sets it to null.
Also I've tried removing the LayoutManager and replacing it with and if statement and suddenly it worked as expected without setting the bind property to null.
In the following repo I've removed the layout manager and repalced it with an if statement:
REPO: https://github.com/zommerberg/sveltekit-bind-bug-without-layout BLITZ: https://stackblitz.com/~/github.com/zommerberg/sveltekit-bind-bug-without-layout
Here the funciton does not get executed (as it should) and it behaves without the bug but the bind: is still not present yet svelte handles it correctly.