Svelte 5 bug?

[dvlpr91]

...

1. <script>
2.   const isDaily = $derived($page.route.id == '/daily');
3.   let start = $state(isDaily ? now.subtract(1, 'month').format('YYYY-MM-DD') : now.subtract(1, 'month').format('YYYY-MM'));
4.   let end = $state(isDaily ? now.format('YYYY-MM-DD') : now.format('YYYY-MM'));
5. </script>

...

6.  <label>
7.    <p class="text-sm text-gray-500">start</p>
8.    <input type={isDaily ? 'date' : 'month'} bind:value={start} />
9.  </label>

...

I get an error on lines 3 and 4.

The error message is as follows
State referenced in its own scope will never update. Did you mean to reference it inside a closure?

Actually, this doesn't change even if $page.route.id changes.

[brunnerh]

$state initializes a new independent state, the warning tells you that the value will not update when isDaily is updated.

You might need an effect here since the value is both editable and presumably should update when the route changes.

Something like:

const isDaily = $derived($page.route.id == '/daily');
let start = $state(startForRoute()); // can be left undefined if value is not needed right away
let end = $state(endForRoute());

$effect.pre(() => {
  start = startForRoute();
  end = endForRoute();
});

function startForRoute() {
  // now probably needs to be reconstructed in these functions
  return now
    .subtract(1, 'month')
    .format(isDaily ? 'YYYY-MM-DD' : 'YYYY-MM');
}

function endForRoute() {
  return now.format(isDaily ? 'YYYY-MM-DD' : 'YYYY-MM');
}

Playground

If you have additional dependencies, you may need untrack so the values are not reset unnecessarily.