T
TanStack•2mo ago
fair-rose

Access path params in head function

For some reason accessing path params in my head function, in order to set the title, causes weird TS errors. If I remove the quotes, to this title: params.slug, I get this error on the head function
'head' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.ts(7023)
I should also mention, this fails as well 
export const Route = createFileRoute("/blog/$slug")({
  head: ({ params }) => {
    return {
      meta: [
        {
          title: `${params.slug} | Adam Rackis's blog`,
        },
      ],
    };
  },
  loader: async ({ params }) => {
    const post = getPostBySlug(params.slug, ["title", "date", "slug", "author", "content", "ogImage", "coverImage"]);
    const content = await markdownToHtml(post.content || "");

    return {
      slug: params.slug,
      post: {
        ...post,
        content,
      },
    };
  },
  component: RouteComponent,
});
export const Route = createFileRoute("/blog/$slug")({
  head: ({ params }) => {
    return {
      meta: [
        {
          title: `${params.slug} | Adam Rackis's blog`,
        },
      ],
    };
  },
  loader: async ({ params }) => {
    const post = getPostBySlug(params.slug, ["title", "date", "slug", "author", "content", "ogImage", "coverImage"]);
    const content = await markdownToHtml(post.content || "");

    return {
      slug: params.slug,
      post: {
        ...post,
        content,
      },
    };
  },
  component: RouteComponent,
});
which creates this error on the loader
Type '({ params }: LoaderFnContext<Register, RootRoute<Register, undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 7 more ..., undefined>) => Promise<...>' is not assignable to type '(ctx: LoaderFnContext<Register, RootRoute<Register, undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 7 more ..., undefined>) => never'. Type 'Promise<{ slug: string; post: { content: string; }; }>' is not assignable to type 'never'.ts(2322)
No description
1 Reply
fair-rose
fair-roseOP•2mo ago
oops - looks like this is a known issue https://github.com/TanStack/router/issues/5235
GitHub
Start RC - lazyFn for loader with head results in type error ...
Which project does this relate to? Router Describe the bug After upgrading to RC I&#39;ve seen this type error that was working fine before the upgrade. Error: Type &#39;Promise&lt;{ id: string; ti...

Did you find this page helpful?