The "base" value in vite.config.ts must end with a trailing

Error message

The "base" value in vite.config.ts must end with a trailing slash ("/"). This is required for correct asset path construction.

What it means

In buildPlan, the React component reads the `base` value from vite.config.ts and requires it to end with a trailing slash so generated asset URLs are correct. A base without a trailing slash throws this plain Error.

Source

Thrown at platform/src/components/aws/react.ts:435

          const content = fs.readFileSync(viteConfig, "utf-8");
          const match = content.match(/["']?base["']?:\s*["']([^"]+)["']/);
          return match ? match[1] : undefined;
        } catch (e) { }
      })();

      // Get base configured in react-router config ie. "/docs/"
      const reactRouterBase = (() => {
        try {
          const rrConfig = path.join(outputPath, "react-router.config.ts");
          const content = fs.readFileSync(rrConfig, "utf-8");
          const match = content.match(/["']?basename["']?:\s*["']([^"]+)["']/);
          return match ? match[1] : undefined;
        } catch (e) { }
      })();

      if (viteBase) {
        if (!viteBase.endsWith("/"))
          throw new Error(
            `The "base" value in vite.config.ts must end with a trailing slash ("/"). This is required for correct asset path construction.`,
          );
        if (!reactRouterBase)
          throw new Error(
            `Found "base" configured in vite.config.ts but missing "basename" in react-router.config.ts. Both configurations are required.`,
          );
      }
      if (reactRouterBase) {
        if (reactRouterBase.endsWith("/"))
          throw new Error(
            `The "basename" value in react-router.config.ts must not end with a trailing slash ("/"). This ensures the root URL is accessible without a trailing slash.`,
          );
        if (!viteBase)
          throw new Error(
            `Found "basename" configured in react-router.config.ts but missing "base" in vite.config.ts. Both configurations are required.`,
          );
      }

View on GitHub (pinned to a0bd20f762)

Solutions

Append a trailing slash to the base value in vite.config.ts
Ensure react-router.config.ts defines a matching basename
Re-run sst deploy after the config change

Example fix

// vite.config.ts before
export default { base: "/app" };
// after
export default { base: "/app/" };

Defensive patterns

Strategy: validation

Validate before calling

const base = viteConfig.base;
if (base && !base.endsWith("/")) throw new Error(`vite base must end with '/': ${base}`);

Try / catch

try {
  new sst.aws.React("Web", args);
} catch (e) {
  if (String(e).includes("trailing slash")) console.error("Fix vite.config.ts base to end with '/'");
  throw e;
}

Prevention

Always end vite base with a trailing slash ("/app/")
Keep vite base and react-router basename in sync
Run a local build (vite build) to catch config issues early

When it happens

Trigger: Setting base in vite.config.ts to a value like "/app" or "https://cdn.example.com/app" (no trailing slash) while deploying the React component.

Common situations: Vite accepts both forms locally, so the app works in `vite dev` but fails on SST deploy; teams moving from CRA or custom CDN paths.

Understand the failure class

Background: Config validation failed: what "invalid value for {key}" and settings-rejection errors mean across 19 open-source libraries — this error's family across 19 libraries.

Related errors

AI-assisted analysis of anomalyco/sst@a0bd20f762 (2026-08-30). Data as JSON: /api/errors/c76bec3137ec95eb. Report an issue: GitHub.