Static server function not found

import { createFileRoute, useLoaderData } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

const getBlogPosts = createServerFn({ method: "GET" })
    .middleware([staticFunctionMiddleware])
    .handler(async () => {
        console.log(
            "STATIC SERVER FUNCTION: generating blog posts at build time...",
        );

        // Simulate slow API
        await new Promise((r) => setTimeout(r, 5000));

        return [
            { title: "Blog", description: "Blog description" },
            { title: "Blog 2", description: "Blog description 2" },
            { title: "Blog 3", description: "Blog description 3" },
        ];
    });

export const Route = createFileRoute("/blog")({
    ssr: true,
    loader: async () => {
        const startTime = Date.now();
        console.log("RUNNING LOADER");

        const res = await getBlogPosts();
        const endTime = Date.now();

        console.log(`LOADER COMPLETED IN ${endTime - startTime}ms`);
        return res;
    },
    shouldReload: false,
    component: BlogPage,
});

function BlogPage() {
 return <div />
}

import { createFileRoute, useLoaderData } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

const getBlogPosts = createServerFn({ method: "GET" })
    .middleware([staticFunctionMiddleware])
    .handler(async () => {
        console.log(
            "STATIC SERVER FUNCTION: generating blog posts at build time...",
        );

        // Simulate slow API
        await new Promise((r) => setTimeout(r, 5000));

        return [
            { title: "Blog", description: "Blog description" },
            { title: "Blog 2", description: "Blog description 2" },
            { title: "Blog 3", description: "Blog description 3" },
        ];
    });

export const Route = createFileRoute("/blog")({
    ssr: true,
    loader: async () => {
        const startTime = Date.now();
        console.log("RUNNING LOADER");

        const res = await getBlogPosts();
        const endTime = Date.now();

        console.log(`LOADER COMPLETED IN ${endTime - startTime}ms`);
        return res;
    },
    shouldReload: false,
    component: BlogPage,
});

function BlogPage() {
 return <div />
}