vercel.json does not seem to work for TanStack Start projects

[jtmuller5]

Which project does this relate to?

Start

Describe the bug

I am trying to deploy a TanStack Start project to Vercel. It generally works with the vercel preset but I recently added a service worker and configured the vercel.json file to add the Service-Worker-Allowed header:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "headers": [
    {
      "source": "/_build/service-worker.js",
      "headers": [
        {
          "key": "Service-Worker-Allowed",
          "value": "/"
        }
      ]
    }
  ]
}

When I deploy this to Vercel, this config file is not used and I get this error:

Service Worker registration failed: SecurityError: Failed to register a ServiceWorker for scope ('https://www.myapp.com/') with script ('https://www.myapp.com/_build/service-worker.js') The path of the provided scope ('/') is not under the max scope allowed ('/_build/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

Below is my registration code:

if ("serviceWorker" in navigator) {
        navigator.serviceWorker
          .register(
            import.meta.env.MODE === "production"
              ? `${import.meta.env.BASE_URL}/service-worker.js`
              : "/dev-sw.js?dev-sw",
            {
              scope: "/",
              type:
                import.meta.env.MODE === "production" ? "classic" : "module",
            }
          )
          .then((registration) => {
            console.log(
              "Service Worker registered with scope:",
              registration.scope
            );
          })
          .catch((error) => {
            console.error("Service Worker registration failed:", error);
          });
      }

And here is my full app.config.ts:

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  baseUrl: ".",
  paths: {
    "@/*": ["./src/*"],
  },
  tsr: {
    appDirectory: "src",
  },
  server: {
    preset: "vercel",
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      VitePWA({
        srcDir: "src",
        injectRegister: false,
        manifest: false,
        strategies: "injectManifest",
        filename: "service-worker.js",
        injectManifest: {
          injectionPoint: undefined,
          swSrc: "src/service-worker.ts",
          swDest: "service-worker.js",
        },
        devOptions: {
          enabled: true,
          type: "module",
        },
      })
    ],
    server: {
      preset: "vercel",
      port: 3010,
      watch: {
        ignored: ["**/storage/**"], // Ignore all subdirectories under storage during development
      },
    },
    build: {},
  },
});

Do I need to do anything special to make the vercel.json work in TanStack Start?

Your Example Website or App

https://clibbits.com

Steps to Reproduce the Bug or Issue

1. Create a TanStack project with a service worker
2. Use the VitePWA plugin to add the service worker to the output
3. Deploy to Vercel

Expected behavior

My vercel.json is used when deploying to Vercel.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[brenelz]

Does this still happen on the latest version? It doesn't have an app.config.ts now as its all vite.

[schiller-manuel]

deployment to vercel happens through the nitro vite plugin now

see tanstack.com/start/latest/docs/framework/react/hosting
if this does not work as expected, most likely an issue against nitro needs to be filed.