T
TanStack•2mo ago
harsh-harlequin

TanStack Start production build generates 404s for all static assets (JS/CSS)

JS/CSS isn't being served in my production builds - I'm sure i'm missing config somewhere. Any thoughts?
Request from ::1: GET /site.webmanifest/index.html
Environment TanStack Start version: @tanstack/react-start@1.124.1 Target: Netlify (target: "netlify") CSS Framework: Tailwind CSS v4 (@tailwindcss/vite) vite.config.ts: 
import {
  tanstackStart,
  TanStackStartVitePlugin,
} from "@tanstack/react-start/plugin/vite";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  esbuild: {
    include: /\.(ts|tsx)$/,
    exclude: /node_modules/,
  },
  optimizeDeps: {
    exclude: ["convex"],
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
    tanstackStart({ target: "netlify" }),
  ],
});
import {
  tanstackStart,
  TanStackStartVitePlugin,
} from "@tanstack/react-start/plugin/vite";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  esbuild: {
    include: /\.(ts|tsx)$/,
    exclude: /node_modules/,
  },
  optimizeDeps: {
    exclude: ["convex"],
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tailwindcss(),
    tanstackStart({ target: "netlify" }),
  ],
});
13 Replies
harsh-harlequin
harsh-harlequinOP•2mo ago
Build warnings:
"createRequestHandler", "defineHandlerCallback", "transformPipeableStreamWithRouter" and "transformReadableStreamWithRouter" are imported from external module "@tanstack/router-core/ssr/server" but never used in "node_modules/@tanstack/start-server-core/dist/esm/createStartHandler.js" and "node_modules/@tanstack/start-server-core/dist/esm/index.js". "H3Error", "MIMES", "callNodeListener", "createApp", "createAppEventHandler", "createError", "createEvent", "createRouter", "defineLazyEventHandler", "defineNodeListener", "defineNodeMiddleware", "defineRequestMiddleware", "defineResponseMiddleware", "defineWebSocket", "dynamicEventHandler", "fromNodeMiddleware", "fromPlainHandler", "fromWebHandler", "isCorsOriginAllowed", "isError", "isEventHandler", "isStream", "isWebResponse", "lazyEventHandler", "promisifyNodeListener", "sanitizeStatusCode", "sanitizeStatusMessage", "serveStatic", "splitCookiesString", "toEventHandler", "toNodeListener", "toPlainHandler", "toWebHandler" and "useBase" are imported from external module "h3" but never used in "node_modules/@tanstack/start-server-core/dist/esm/h3.js" and "node_modules/@tanstack/start-server-core/dist/esm/index.js". ✓ 146 modules transformed. [plugin vite:css-post] Sourcemap is likely to be incorrect: a plugin (vite:css-post) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
harsh-harlequin
harsh-harlequinOP•2mo ago
No description
harsh-harlequin
harsh-harlequinOP•2mo ago
my package json: 
"scripts": {
    "dev": "vite dev",
    "build": "vite build && tsc",
    "start": "vite start",
    "format": "prettier --write .",
    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
  },
"scripts": {
    "dev": "vite dev",
    "build": "vite build && tsc",
    "start": "vite start",
    "format": "prettier --write .",
    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
  },
 "@tanstack/react-form": "^1.12.4",
    "@tanstack/react-query": "^5.81.5",
    "@tanstack/react-router": "^1.124.0",
    "@tanstack/react-router-devtools": "^1.124.0",
    "@tanstack/react-router-with-query": "^1.124.0",
    "@tanstack/react-start": "^1.124.1",
 "@tanstack/react-form": "^1.12.4",
    "@tanstack/react-query": "^5.81.5",
    "@tanstack/react-router": "^1.124.0",
    "@tanstack/react-router-devtools": "^1.124.0",
    "@tanstack/react-router-with-query": "^1.124.0",
    "@tanstack/react-start": "^1.124.1",
Still haven't found the needle in the haystack on this one. Same setup worked fine on vinxi build. Tried running a preview of one of the clerk examples too... broken
absent-sapphire
absent-sapphire•2mo ago
how did you deploy to netlify? no wait, you are running locally with the netlify preset? that wont work
harsh-harlequin
harsh-harlequinOP•2mo ago
Might've gotten this to work locally now.. start": "vite --port 3000",
absent-sapphire
absent-sapphire•2mo ago
no this wont work
harsh-harlequin
harsh-harlequinOP•2mo ago
Tried netlify and without, there's various commands in the examples to preview prod locally.
absent-sapphire
absent-sapphire•2mo ago
vite cannot be used for previewing you can build with the node-server preset and preview with node
harsh-harlequin
harsh-harlequinOP•2mo ago
on netlify, I was getting those production errors too. I just bumped versions of tailwind vite and start .. might've resolved itself. What's the recommended package.json scripts for local preview + netlify deployment? There's a mix of scripts in the examples depending on which you're looking at.
absent-sapphire
absent-sapphire•2mo ago
on netlify, I was getting those production errors too
how did you deploy there? i don't know how to locally preview netlify build output do they have a CLI for that?
harsh-harlequin
harsh-harlequinOP•2mo ago
they have netlify serve. I'd be open to changing my vite config for preview if needed for local
harsh-harlequin
harsh-harlequinOP•2mo ago
RE: Netlify deploy - Trying to update a previous deploy I setup a while back.. I don't think it's doing anything special?
No description
harsh-harlequin
harsh-harlequinOP•2mo ago
it's hooked up to my github.

Did you find this page helpful?