form example <SettingsForm data={data.form} /> wrong use <SettingsForm {data} />

[good-dev-student]

Change Type

Correction

Proposed Changes

Hi simple replace the :

<SettingsForm data={data.form} />

with

<SettingsForm {data} />

Why TR;TL

if you apply the docs will have this issue :

Property 'form' is missing in type 'SuperValidated<{ username: string; }, any, { username: string; }>' but required in type '{ form: SuperValidated<{ username: string; }>; }'.ts(2741)

in src\routes\settings+page.svelte

<script lang="ts">
	import SettingsForm from './settings-form.svelte';
	let { data } = $props();
	console.log(data);

{
  form: {
    id: '16btw7k',
    valid: false,
    posted: false,
    errors: {},
    data: { username: '' },
    constraints: { username: [Object] }
  }
}
	
</script>

<SettingsForm data={data.form} />

so if you pass the form then in the component src\routes\settings\settings-form.svelte YOU USE - > data.form

 const form = superForm(data.form, {
     validators: zodClient(formSchema),
    });

you will face this issue:

SuperFormError: No form data sent to superForm. Make sure the output from superValidate is used (usually data.form) and that it's not null or undefined. Alternatively, an object with default values for the form can also be used, but then constraints won't be available.

[ieedan]

Which example is this?