deep-jade

Vercel target in Nx monorepo results in 404

I have following config:

import { builtinModules } from 'module'
import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [tsConfigPaths({})],
    ssr: {
      noExternal: ['react-dropzone'],
    },
    build: {
      rollupOptions: {
        external: [...builtinModules, /^node:/],
      },
    },
  },

  server: {
    preset: 'vercel',
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
  },
})

import { builtinModules } from 'module'
import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [tsConfigPaths({})],
    ssr: {
      noExternal: ['react-dropzone'],
    },
    build: {
      rollupOptions: {
        external: [...builtinModules, /^node:/],
      },
    },
  },

  server: {
    preset: 'vercel',
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
  },
})

And this settings in Vercel (see screenshot), it successfully builds, but then I see only 404 (see screenshot 2).

3 Replies

rare-sapphire•8mo ago

I solved this (I guess hackily) in my monorepo setup for nx, I have a build step that copies the dev.config.ts file in each app directory to root app.config.ts:

{
  "name": "web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/web",
  "projectType": "application",
  "tags": [],
  "targets": {
    "dev": {
      "executor": "nx:run-commands",
      "options": {
        "command": "bunx vinxi dev --config apps/web/dev.config.ts",
        "port": 3000
      }
    },
    "build:setup": {
      "executor": "nx:run-commands",
      "options": {
        "command": "cp apps/web/dev.config.ts app.config.ts"
      }
    },
    "build": {
      "dependsOn": ["web:build:setup"],
      "executor": "nx:run-commands",
      "options": {
        "command": "bunx vinxi build"
      }
    }
  }
}

{
  "name": "web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/web",
  "projectType": "application",
  "tags": [],
  "targets": {
    "dev": {
      "executor": "nx:run-commands",
      "options": {
        "command": "bunx vinxi dev --config apps/web/dev.config.ts",
        "port": 3000
      }
    },
    "build:setup": {
      "executor": "nx:run-commands",
      "options": {
        "command": "cp apps/web/dev.config.ts app.config.ts"
      }
    },
    "build": {
      "dependsOn": ["web:build:setup"],
      "executor": "nx:run-commands",
      "options": {
        "command": "bunx vinxi build"
      }
    }
  }
}

Then add app.config.ts to .gitignore - this way you can run dev using the dev config, and at build time it uses the app config, but its never committed anywhere dev.config.ts for reference:

import { sentryVitePlugin } from "@sentry/vite-plugin";
import { defineConfig } from "@tanstack/start/config";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  server: {
    preset: "vercel",
  },
  tsr: {
    appDirectory: "apps/web/app",
  },
  routers: {
    public: {
      dir: "apps/web/public",
    },
  },
  vite: {
    plugins: [
      tsconfigPaths(),
      sentryVitePlugin({
        ...
      }),
    ],
    ssr: {
      noExternal: ["use-file-picker"],
    },
  },
});

import { sentryVitePlugin } from "@sentry/vite-plugin";
import { defineConfig } from "@tanstack/start/config";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  server: {
    preset: "vercel",
  },
  tsr: {
    appDirectory: "apps/web/app",
  },
  routers: {
    public: {
      dir: "apps/web/public",
    },
  },
  vite: {
    plugins: [
      tsconfigPaths(),
      sentryVitePlugin({
        ...
      }),
    ],
    ssr: {
      noExternal: ["use-file-picker"],
    },
  },
});

rare-sapphire•8mo ago

And the vercel build commands

deep-jadeOP•8mo ago

Thanks, I'll try. But meanwhile I migrated from Vite, because... I just hate it so much (tons of bugs and weird fixes because CJS etc.). So now I am using RsPack + Tanstack Router only. 😄

Gaming

Programming

Vercel target in Nx monorepo results in 404

Did you find this page helpful?