TanStackT
TanStack•3mo ago•
7 replies
military-pink

Getting TS error `xyz is not assignable to type '"Function is not serializable"'` from `beforeLoad`

I've been trying to implement the code pattern shown here like this:

export const getAllTodos = createServerFn().handler(async () => ['ToDo 1', 'ToDo 2', 'ToDo 3'];

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ queryOptions: { queryKey: ['todos'], queryFn: getAllTodos } }),
  loader: async ({ context: ctx }) => {
    await ctx.queryClient.prefetchQuery(ctx.queryOptions);
  },
  component: App,
});


This gives me an error on 
beforeLoad
:
Type '() => { queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' is not assignable to type '(ctx: BeforeLoadContextOptions<Register, RootRoute<Register, undefined, MyRouterContext, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 5 more ..., undefined>) => { ...; }'.
  Call signature return types '{ queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' and '{ queryOptions: { queryKey: string[]; queryFn: "Function is not serializable"; }; }' are incompatible.
    The types of 'queryOptions.queryFn' are incompatible between these types.
      Type 'OptionalFetcher<Register, undefined, undefined, string[]>' is not assignable to type '"Function is not serializable"'.ts(2322)


I started the app inside a monorepo using npm create @tanstack/start@latest and adjusted some stuff like TS config etc.
When having the same code in a standalone repo right after npm create @tanstack/start@latest, I'm not getting this errors.

Also, when just ignoring with @ts-ignore, everything is working as expected at runtime, so this only seems to be build time issue.

I already tried c/p the whole tsconfig.json from the standalone app to the monorepo app but am still seeing the error 🤨.

I'd really appreciate some input on where I could look into!
Was this page helpful?