T
TanStack•2mo ago
correct-apricot

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" };
});
// ./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",
    }),
  ],
});
// 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"
// 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 };
  },
})
// ./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,
  });
  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
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 🙏
1 Reply
correct-apricot
correct-apricotOP•2mo ago
In case anyone else hits this you have to use static prerendering. In my case, I was using the default settings (SSR). https://github.com/TanStack/router/issues/4202
GitHub
Unable to resolve static server function json (main/devinxi) · Iss...
Which project does this relate to? Start v1.121.4 Describe the bug The application is unable to resolve the json file from a static server function at runtime. I&#39;ve reproduced the issue in star...

Did you find this page helpful?