This is in svelte version 3.
Reactive declarations can not depend on const "variables", even though the variable is declared as const, its properties can still change.
// This works
<script>
let obj = {
prop: 10
}
$: reactiveDecl = obj.prop;
</script>
<h1>{reactiveDecl}</h1>
vs
// Error "Invalid reactive declaration — must depend on local state ..."
<script>
const obj = {
prop: 10
}
$: reactiveDecl = obj.prop;
</script>
<h1>{reactiveDecl}</h1>
I can't reproduce the issue in REPL.
Could you provide a link with the error ?
@thollander Your link is using a rather old alpha of v3 from over a month ago. https://v3.svelte.technology/repl?version=3.0.0-beta.20&gist=cb6444292dfa437bbf9d094c33bbe8a0 The error message does happen with the latest beta.
Marking this as a bug. It's often desirable to have 'reactive' properties that depend on static values, for aesthetic purposes as much as anything else:
// fixed
const padding = 20;
// changeable
let width = 100;
let height = 100;
$: x1 = padding; // invalid
$: x2 = width - padding;
$: y1 = padding; // invalid
$: y2 = height - padding;
@Rich-Harris I think this should be reopened - Although reactive declarations can now depend on const variables, there are cases where in runtime an error will get thrown:
https://svelte.dev/repl?version=3.0.1&gist=cdd9c11865f84480e7e22d828909da15
In this example, it seems like list doesn't get evaluated (so... defined) unless the variable is not set as a const OR there's another reactive declaration that depends on it.
If it's used directly in the template, then it doesn't get defined and we get the runtime error.
In this example I declared the variable as a nested object just to show another use case, but the same thing happens for a static const value (just replace everything for const count = 3, removing the button that increments it)
you're right, that's weird — reopening
Most helpful comment
you're right, that's weird — reopening