I have the following form in SuperForms:

  const { form } = superForm<CreateJobSchema>(data, {
    validators: typeboxClient(CREATE_JOB_SCHEMA),
    onError: (error) => {
      console.error(error)
      toast.error("Failed to create job. Please try again later.")
      isGenerating = false
    }
  })

With the following schema:

const ScorecardSchema = Type.Object({
  description: Type.String(),
  weight: Type.Number()
})

export const CREATE_JOB_SCHEMA = Type.Object({
  title: Type.String(),
  description: Type.String(),
  tenantId: Type.String(),
  scorecard: Type.Array(ScorecardSchema)
})

When I use the following:

  <Button
    variant="outline"
    type="button"
    onclick={() => {
      $form.scorecard.push({
        description: "",
        weight: 0
      })
    }}>Add Criteria</Button
  >
  {#each $form.scorecard as scorecard}
    <div class="flex flex-col gap-2">
      <div class="flex items-center gap-2">
        <span>Description</span>
        <Input type="text" bind:value={scorecard.description} />
      </div>
    </div>
  {/each}

When I click on "Add Criteria", scorecard is not reactive until title and description change. Once title and description change, the entire UI updates.

And indeed, I get the following error:

CreateJob.svelte?t=1739748167963:177 [svelte] binding_property_non_reactive
`bind:value={scorecard.description}` (src/routes/(authenticated)/jobs/create/CreateJob.svelte:66:31) is binding to a non-reactive property
/e/binding_property_non_reactive
(anonymous)    @    CreateJob.svelte?t=1739748167963:177

Can someone explain why this is?

I have the following form in SuperForms:

  const { form } = superForm<CreateJobSchema>(data, {
    validators: typeboxClient(CREATE_JOB_SCHEMA),
    onError: (error) => {
      console.error(error)
      toast.error("Failed to create job. Please try again later.")
      isGenerating = false
    }
  })

With the following schema:

const ScorecardSchema = Type.Object({
  description: Type.String(),
  weight: Type.Number()
})

export const CREATE_JOB_SCHEMA = Type.Object({
  title: Type.String(),
  description: Type.String(),
  tenantId: Type.String(),
  scorecard: Type.Array(ScorecardSchema)
})

When I use the following:

  <Button
    variant="outline"
    type="button"
    onclick={() => {
      $form.scorecard.push({
        description: "",
        weight: 0
      })
    }}>Add Criteria</Button
  >
  {#each $form.scorecard as scorecard}
    <div class="flex flex-col gap-2">
      <div class="flex items-center gap-2">
        <span>Description</span>
        <Input type="text" bind:value={scorecard.description} />
      </div>
    </div>
  {/each}

When I click on "Add Criteria", scorecard is not reactive until title and description change. Once title and description change, the entire UI updates.

And indeed, I get the following error:

CreateJob.svelte?t=1739748167963:177 [svelte] binding_property_non_reactive
`bind:value={scorecard.description}` (src/routes/(authenticated)/jobs/create/CreateJob.svelte:66:31) is binding to a non-reactive property
https://svelte.dev/e/binding_property_non_reactive
(anonymous)    @    CreateJob.svelte?t=1739748167963:177

Can someone explain why this is?

• svelte

1 Answer 1

.push() is only reactive in Svelte 5 using an array with $state.

In Svelte 3/4 reactivity is based on assignments, so you need to either assign a new array (array = [...array, item]) or add a dummy assignment after the .push() (here e.g. $form = $form).

(The console output is a warning, not an error, and it appears to be a false positive in this case.)