form remote functions - invalid typescript early exit

[florianlouvet]

Describe the bug

Version: @sveltejs/kit 2.46.4

It seems that Typescript does not pick up on the fact that calling invalidinside a form remote function will cause an early exit from the throw.

Reproduction

Tried to reproduce on StackBlitz, but the TypeScript error there is not the same, and it makes no sense.

In this example, name is still picked up as being string | undefinded even though I expect that calling invalidshould make it clear to typescript that we will not reach myFunctionRequiringAString(name)with an undefined namevariable.

import { form } from "$app/server";
import * as v from "valibot";

const myFunctionRequiringAString = (a: string) => a;

export const createSomething = form(
  v.object({ name: v.optional(v.string()) }),
  async ({ name }, invalid) => {
    if (!name) {
      invalid(invalid.name("Name is required"));
    }
    myFunctionRequiringAString(name);

    console.log("Creating something with name:", name);
  }
);

Logs

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 808.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 10.5.2 - /opt/homebrew/bin/pnpm
    bun: 0.1.3 - /Users/florianlouvet/.bun/bin/bun
    Deno: 1.46.3 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 141.0.7390.67
    Firefox: 143.0.4
    Safari: 18.6
  npmPackages:
    @sveltejs/adapter-auto: ^6.1.1 => 6.1.1 
    @sveltejs/kit: ^2.46.4 => 2.46.4 
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1 
    svelte: ^5.39.11 => 5.39.11 
    vite: ^7.1.9 => 7.1.9

Severity

annoyance

Additional Information

No response

[florianlouvet]

Apparently, this is normal behavior for Typescript due to how it handles Narrowing / Control Flow Analysis.
To avoid the Typescript error, you should use return or move the rest of the code to the elsecondition of the ifstatement.
Examples:

import { form } from "$app/server";
import * as v from "valibot";

const myFunctionRequiringAString = (a: string) => a;

export const createSomething = form(
  v.object({ name: v.optional(v.string()) }),
  async ({ name }, invalid) => {
    if (!name) {
      return invalid(invalid.name("Name is required"));
    }
    myFunctionRequiringAString(name);

    console.log("Creating something with name:", name);
  }
);

or

import { form } from "$app/server";
import * as v from "valibot";

const myFunctionRequiringAString = (a: string) => a;

export const createSomething = form(
  v.object({ name: v.optional(v.string()) }),
  async ({ name }, invalid) => {
    if (!name) {
      invalid(invalid.name("Name is required"));
    } else {
      myFunctionRequiringAString(name);
  
      console.log("Creating something with name:", name);
   }
  }
);