actions: generated `Action` type is unknown and `export let form` is not populated

[cdcarson]

Describe the bug

Not sure whether this is just me missing something. But a couple of things seem not to be working in a route with actions.

In the page component:

1. The generated ActionData type seems stubbornly unknown. I tried restarting the typescript and svelte language servers, stopping and restarting npm run dev, npm run check and restarting VSCode, all to no avail.
2. The export let form: ActionData never seems to get populated after an invalid submission. The form does work when it is valid, however. The action does work as I wrote it, however, redirecting on success and staying on the same page when I return invalid(...).

Here's what I'd expect to happen:

For (1) I'd assume that the generated ActionData would be inferred from the return type of my default action.

For (2) note that I've only gotten so far as trying a plain POST request, with no enhancement. I'd expect that export let form would contain something other than undefined after an invalid submission. Without resolving (1) it's hard to know what that something should be.

Anyway, I think I've read the docs correctly, but let me know if I've missed something. Thanks.

Reproduction

https://github.com/cdcarson/issue-sveltekit-generated-actiondata-type-undefined.git

The relevant route is in src/routes/prefs.

To see that ActionData is unknown:

• Run the app to generate types
• Open src/routes/prefs/+page.svelte
• Hover over form to get the type

To see that form never gets populated:

• Run the app and navigate to http://localhost:5173/prefs
• Enter "kapoor black" as your favorite color and submit. This is a forbidden color, so the action returns invalid(...). But somehow nothing is getting into the template, AFAICT.
• Enter "blue" and submit. This will work and you will be redirected to the home page.

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 148.02 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.52
    Safari: 15.6.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.71 
    @sveltejs/kit: next => 1.0.0-next.472 
    svelte: ^3.44.0 => 3.50.0 
    vite: ^3.1.0 => 3.1.0

Severity

blocking an upgrade

Additional Information

No response

[williamviktorsson]

Experiencing the same. Related : #6597

Before the update. The errors object could have an unknown/undefined type but the object would still be populated when running the server.

Now the object has an unknown type and is not populated at all.

[cdcarson]

@williamviktorsson Thanks. I thought I was going off the deep end.

Now the object has an unknown type and is not populated at all

"is not populated at all" -- is that the same as me saying, above...

The export let form: ActionData never seems to get populated after an invalid submission.

... or something else?

[williamviktorsson]

... or something else?

I tried the following assuming that might be the case.

<!-- +page.svelte -->
<script lang="ts">
	export let form: any; // undefined
	export let data: any;  // {}
	export let errors: any; // undefined
</script>

[dummdidumm]

Can't rerproduce the type issue, will push a fix for the form props issue.

[cdcarson]

@dummdidumm That worked for the props. Thanks. Side note: I really like where this is headed, having been a skeptic of the changes at first. Appreciate your work & patience.

As for the types issue, this seems to be coming up for typescript users (e.g. me, and the folks who raised #6597.) I'm pretty sure it's a VSCode/extensions issue. I'll try some things, but do you guys have an VSCode devcontainer.json, or just a list of extensions, that you could share?

[dummdidumm]

Thank you!

Don't know what you mean by that VSCode devcontainer thing. Svelte files are handled through the Svelte for VS Code extension. There have been other issues raised with this not getting updated properly sometimes, but so far nothing that is reproducible. I'll try myself after things settle down a bit.

[aloker]

I'm experiencing the type issue as well, but I'll need to investigate more to isolate a repro. Iirc from the top of my head: it appeared when the action could return an invalid() response or a plain object { success: true } in different paths. Typescript merged the result type into any for whatever reason and that seems to cause ActionData to become unknown.

[cdcarson]

One more thing, then I'll let this go.

Looking at a route in my main project, where I originally encountered this issue, here's ActionData from ./$types...

// .svelte-kit/types/src/routes/(web)/auth/sign-in/$types.d.ts
export type ActionData = Kit.AwaitedActions<typeof import('./proxy+page.server.js').actions>;

This is using 472.

After updating the reproduction for this issue to use 473, ActionData looks like this:

// .svelte-kit/types/src/routes/prefs/$types.d.ts
export type ActionData = Kit.AwaitedActions<typeof import('../../../../../src/routes/prefs/+page.server.js').actions>;

It doesn't make a difference to whether the types are picked up (either in .svelte or .ts) but it looks like something flaky is happening.

Anyway, cheers.

[bencates]

I'm still seeing type errors on ActionData on 1.0.0-next.474. I have the following form and action:

<!-- src/routes/(site)/contact/+page.svelte -->

<script lang="ts">
  export let form: import('./$types').ActionData
</script>

{#if form?.success}
  <p>Success</p>
{:else}
  <form method="POST">
    <button type="submit">Submit</button>
  </form>
{/if}

// src/routes/(site)/contact/+page.server.ts

export const actions: Actions = {
  default() {
    return { success: true }
  },
}

This appears to actually work correctly, but Typescript isn't happy about it. VSCode is saying the type of form is unknown and svelte-check seems to agree.

→ npm run check

> myhearingsolution.com@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /home/ben/Projects/Personal/myhearingsolution
Getting Svelte diagnostics...

/home/ben/Projects/Personal/myhearingsolution/src/routes/(site)/contact/+page.svelte:5:12
Error: Property 'success' does not exist on type '{}'. (ts)

{#if form?.success}
  <p>Success</p>


====================================
svelte-check found 1 error, 0 warnings, and 0 hints

---

Digging into the types it appears type UnpackValidationError<T> = T extends ValidationError<infer X> ? X : T; isn't working properly.

// Expected this to be `{ success: boolean }`, VSCode reports it's actually `unknown`
type Test = UnpackValidationError<{ success: boolean }>