Cli dev breaks after build with vite tanstack router and spa redirect

Support
, ,
1

I have a Vite TanStack router project, because of spa i have a redirect in my netlify.toml from /* to index.html as recommended here, however when building locally using the ‘ntl build’ command the project then crashes when doing ‘ntl dev’ until the dist folder is deleted. i have a MRE of the project here here is the link to the netlify app

2

Tried your repo, built fine:

netlify build --offline

Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 33.4.6

❯ Flags
  dry: false
  offline: true

❯ Current directory
  /home/hrishikesh/tickets/f-151899

❯ Config file
  /home/hrishikesh/tickets/f-151899/netlify.toml

❯ Context
  production

build.command from netlify.toml                               
────────────────────────────────────────────────────────────────

$ vite build
bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)
vite v6.3.5 building for production...
Generated route tree in 114ms
✓ 134 modules transformed.
dist/index.html                   0.73 kB │ gzip:  0.41 kB
dist/assets/logo-CHtJT8UQ.svg     8.61 kB │ gzip:  3.65 kB
dist/assets/index-BarpStXw.css    0.73 kB │ gzip:  0.48 kB
dist/assets/_jobId-BngASlKQ.js    0.18 kB │ gzip:  0.17 kB
dist/assets/index-CCTlHKxb.js     0.42 kB │ gzip:  0.29 kB
dist/assets/index-BvqSK_0V.js   261.90 kB │ gzip: 83.72 kB
✓ built in 1.44s

(build.command completed in 3.1s)

Netlify Build Complete                                        
────────────────────────────────────────────────────────────────

(Netlify Build completed in 3.2s)
3

yes correct, it does build fine, running ‘ntl dev’ post build crashes the dev server

4

Sorry for the oversight, you’re right. Seems like this can be fixed by adding a plugin like:

import { defineConfig } from 'vite'
import viteReact from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
import path from "path";
import { existsSync, rmSync } from 'node:fs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [(() => {
    return {
      configResolved(resolvedConfig) {
        const distDir = path.join(resolvedConfig.root, resolvedConfig.build.outDir)
        if (existsSync(distDir)) {
          rmSync(distDir, {
            recursive: true
          })
        } 
      },
      name: 'delete-dist'
    }
  })(), tanstackRouter({ autoCodeSplitting: true }), viteReact()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})