TanStackT
TanStack•6mo ago•
1 reply
recent-teal

Static server functions do not work on Netlify

Has anyone tried using static server functions on Netlify? My web app will either crash immediately or throw a 404 when attempting to query the function.

Here's an example of what I have implemented:
// ./src/server-functions/getAppVersion.ts
import { createServerFn } from "@tanstack/react-start";

export const getAppVersion = createServerFn({
  type: "static",
}).handler(async () => {
  return { appVersion: "1.0.0" };
});


// vite.config.ts
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({
      target: "netlify",
    }),
  ],
});


// package.json

"@tanstack/react-query": "^5.79.0",
"@tanstack/react-router": "^1.127.9",
"@tanstack/react-router-with-query": "^1.127.9",
"@tanstack/react-start": "^1.127.9"


Failure modes

// ./src/routes/__root.tsx
...
export const Route = wrapCreateRootRouteWithSentry(
  createRootRouteWithContext<{ queryClient: QueryClient }>(),
)({
  ...
  loader: async () => {
    const { appVersion } = await getAppVersion();
    return { appVersion };
  },
})

^ that will cause the app to immediately crash on first load and throw this error: ENOENT: no such file or directory, mkdir '/opt/build'

  const { data } = useQuery({
    queryKey: ["appVersion"],
    queryFn: getAppVersion,
    refetchInterval: 1000 * 60,
  });

^ this will throw a network error like so:
Request URL: https://[redacted].netlify.app/__tsr/staticServerFnCache/f0be6e2542dd389c2436359ac8e68f0481afeb28.json
Request Method: GET
Status Code: 404 Not Found


Has anyone else run into a similar issue? Any help resolving this would be much appreciated 🙏
Was this page helpful?