[TanStack Start] - Vite plugins not working (PWA, TS Checker)

[DaliborHomola]

Hello 👋
I'm not sure if I'm missing something in my configuration or if the vite plugins are not compatible with TanStack Start (yet), but I can't get vite-plugin-checker or vite-plugin-pwa work.
Does anyone have any configuration/workaround to get vite plugins working? Thank you.

My code now:

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

export default defineConfig({
  vite: {
    plugins: [
      VitePWA({
        registerType: 'autoUpdate',
        workbox: {
          skipWaiting: true,
          clientsClaim: true,
        },
      }),
      checker({
        typescript: true,
      }),
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
});

[DaliborHomola]

The new version of TanStack Start has dropped app.config.ts and now uses vite.config.ts instead — and it’s working as expected.

[kieranm]

@DaliborHomola Would you mind sharing your config? I can't get the service worker to show up in the generated output

[DaliborHomola]

Hi, of course.

1. Be sure you have updated all dependencies
2. Update your project based on this example: Tanstack start that means remove api.ts client.tsx ssr.tsx app.config.ts
3. Create vite.config.ts like this:

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

export default defineConfig({
  server: {
    port: 3000,
  },
  ssr: {
    noExternal: ["@mui/*", "wcz-test"],
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart(),
    checker({
      typescript: true,
    }),
    VitePWA({
      registerType: "autoUpdate",
      manifestFilename: "site.webmanifest"
    }),
  ],
})

4. Be sure also update package.json script "dev": "vite dev"

[DaliborHomola]

Hi, I've updated my code to include plugins. It's all in vite.config.ts.

[kieranm]

Thanks @DaliborHomola! Can you confirm that a service worker is being successfully registered with this approach?

[DaliborHomola]

Thanks @DaliborHomola! Can you confirm that a service worker is being successfully registered with this approach?

Yes, you can try to enable on localhost

devOptions: {
  enabled: true,
  type: "module"
},

[kieranm]

It works in dev mode but it doesn't create the service worker on the actual deployed/built app for me. Is it working for you on the deployed app?

[DaliborHomola]

I haven't deployed my app yet, so it might not be fully functional yet...