This worked for me:

"devDependencies": {
    "laravel-mix": "^6.0.49",
    "webpack": "5.93.0"
},
"resolutions": {
    "webpack": "5.93.0"
},

I love this series! These lessons are gold. Thank you @simonswiss

Hi, I really enjoyed this course, thank you!

If you're using the latest version of the Starter Kit with Wayfinder, I like this way of handling forms. We avoid using useForm, specify the PUT method, and the images are handled automatically. Just import Form from Inertia and PuppyController from actions.

<Form
    {...PuppyController.update.form.put(puppy)}
    options={{
        preserveScroll: true,
    }}
    onSuccess={() => setOpen(false)}
    className="space-y-6"
>
    {({ processing, errors }) => (
        <>
            <Label htmlFor="name">Name</Label>
            <Input
                id="name"
                name="name"
                className="mt-1 block w-full"
                defaultValue={puppy.name}
                required
                autoComplete="name"
                placeholder="Full name"
            />
            {errors.name && (
                <p className="mt-1 text-xs text-red-500">
                    {errors.name}
                </p>
            )}

            <Label htmlFor="trait">Personality trait</Label>
            <Input
                id="trait"
                name="trait"
                className="mt-1 block w-full"
                defaultValue={puppy.trait}
                required
                placeholder="Personality trait"
            />

            {errors.trait && (
                <p className="mt-1 text-xs text-red-500">
                    {errors.trait}
                </p>
            )}

            <Label htmlFor="image">Change image</Label>
            <Input
                id="image"
                name="image"
                type="file"
                className="mt-1 block w-full"
                placeholder="Profile picture"
            />

            {errors.image && (
                <p className="mt-1 text-xs text-red-500">
                    {errors.image}
                </p>
            )}

            <DialogFooter className="gap-2">
                <DialogClose asChild>
                    <Button variant="secondary">Cancel</Button>
                </DialogClose>

                <Button
                    className="relative disabled:opacity-100"
                    disabled={processing}
                    type="submit"
                >
                    {processing && (
                        <div className="absolute inset-0 grid place-items-center">
                            <LoaderCircle className="size-5 animate-spin stroke-primary-foreground" />
                        </div>
                    )}
                    <span
                        className={clsx(
                            processing && 'invisible',
                        )}
                    >
                        Update
                    </span>
                </Button>
            </DialogFooter>
        </>
    )}
</Form>

It's nice to have a command to do this. Handy :) An alternative method I've found and use quite often is to use the booted method on the Model. So when the model is deleted it will delete any associated files. If we are deleting Puppies using Eloquent the clean up will happen for each one.

Alter the image path depending on what you stored in the DB... my version is:

protected static function booted(): void
{
    static::deleting(function ($puppy) {
        $path = str_replace('/storage/', '', $puppy->image_url);
        Storage::disk('public')->delete($path);
    });
}

Here's the link to the (React 19.2) Rules of Hooks page: https://react.dev/warnings/invalid-hook-call-warning