T
TanStack•8mo ago
generous-apricot

Type instantiation is excessively deep and possibly infinite

Hey there! I was testing https://conform.guide with the start-counter example and encountered this weird type error. Everything works perfectly at runtime. The repro is quite simple, just install conform: 
npm i @conform-to/react @conform-to/zod zod
npm i @conform-to/react @conform-to/zod zod
and then in any page: 
import { createFileRoute } from "@tanstack/react-router"
import { createServerFn } from "@tanstack/start"
import { parseWithZod } from "@conform-to/zod"
import { z } from "zod"

const schema = z.object({
  username: z.string(),
})

const serverFn = createServerFn({ method: "POST" })
  .validator((data: FormData) => data)
  .handler(async (options) => {
    const submission = parseWithZod(options.data, { schema })
    return submission.reply() // Throws the type error
  })

export const Route = createFileRoute("/")({
  component: Home,
})

function Home() {
  return (
    <form
      action={serverFn.url}
      method="post"
      encType="multipart/form-data"
    >
      <input type="text" name="username" />
      <button>Submit</button>
    </form>
  )
}
import { createFileRoute } from "@tanstack/react-router"
import { createServerFn } from "@tanstack/start"
import { parseWithZod } from "@conform-to/zod"
import { z } from "zod"

const schema = z.object({
  username: z.string(),
})

const serverFn = createServerFn({ method: "POST" })
  .validator((data: FormData) => data)
  .handler(async (options) => {
    const submission = parseWithZod(options.data, { schema })
    return submission.reply() // Throws the type error
  })

export const Route = createFileRoute("/")({
  component: Home,
})

function Home() {
  return (
    <form
      action={serverFn.url}
      method="post"
      encType="multipart/form-data"
    >
      <input type="text" name="username" />
      <button>Submit</button>
    </form>
  )
}
No description
4 Replies
helpful-purple
helpful-purple•8mo ago
can you package this up as a complete minimal example so we can debug the types?
generous-apricot
generous-apricotOP•8mo ago
helpful-purple
helpful-purple•8mo ago
there is atleast the problem that the submission.reply() is not JSON serializable e.g. its intent prop this works 
const getCount = createServerFn({ method: "POST" })
  .validator((data: FormData) => data)
  .handler(async ({data}) => {
    const submission = parseWithZod(data, { schema })
    const {error, state, status} = submission.reply()
    return {error, state, status}
  })
const getCount = createServerFn({ method: "POST" })
  .validator((data: FormData) => data)
  .handler(async ({data}) => {
    const submission = parseWithZod(data, { schema })
    const {error, state, status} = submission.reply()
    return {error, state, status}
  })
generous-apricot
generous-apricotOP•8mo ago
ooh makes sense! Thanks :)

Did you find this page helpful?