feat: custom vite react/solid plugins (#4609)

Author: schiller-manuel

examples/react/start-basic/package.json

@@ -21,6 +21,7 @@
     "@types/node": "^22.5.4",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.6.0",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",

examples/react/start-basic/vite.config.ts

@@ -1,6 +1,7 @@
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import { defineConfig } from 'vite'
 import tsConfigPaths from 'vite-tsconfig-paths'
+import viteReact from '@vitejs/plugin-react'
 
 export default defineConfig({
   server: {
@@ -10,6 +11,7 @@ export default defineConfig({
     tsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
-    tanstackStart(),
+    tanstackStart({ customViteReactPlugin: true }),
+    viteReact(),
   ],
 })

examples/solid/start-basic/package.json

@@ -23,6 +23,7 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
     "vite": "^6.3.5",
+    "vite-plugin-solid": "^2.11.7",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

examples/solid/start-basic/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import tsConfigPaths from 'vite-tsconfig-paths'
 import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
+import viteSolid from 'vite-plugin-solid'
 
 export default defineConfig({
   server: {
@@ -10,6 +11,7 @@ export default defineConfig({
     tsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
-    tanstackStart({}),
+    tanstackStart({ customViteSolidPlugin: true }),
+    viteSolid({ ssr: true }),
   ],
 })

packages/react-start-plugin/src/index.ts

@@ -17,6 +17,15 @@ export function TanStackStartVitePlugin(
     WithReactPlugin
   const options: OptionsWithReact = getTanStackStartOptions(opts)
 
+  if (opts?.customViteReactPlugin !== true) {
+    console.warn(
+      `please add the vite-react plugin to your Vite config and set 'customViteReactPlugin: true'`,
+    )
+    console.warn(
+      `TanStack Start will not configure the vite-react plugin in future anymore.`,
+    )
+  }
+
   return [
     TanStackStartVitePluginCore(
       {
@@ -61,7 +70,7 @@ export default createStartHandler({
       },
       options,
     ),
-    viteReact(options.react),
+    !opts?.customViteReactPlugin && viteReact(options.react),
   ]
 }
 

packages/react-start-plugin/src/schema.ts

@@ -7,10 +7,12 @@ import type { Options as ViteReactOptions } from '@vitejs/plugin-react'
 
 export type WithReactPlugin = {
   react?: ViteReactOptions
+  customViteReactPlugin?: boolean
 }
 
 const frameworkPlugin = {
   react: z.custom<ViteReactOptions>().optional(),
+  customViteReactPlugin: z.boolean().optional().default(false),
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars

packages/solid-start-plugin/src/index.ts

@@ -17,6 +17,15 @@ export function TanStackStartVitePlugin(
     WithSolidPlugin
   const options: OptionsWithSolid = getTanStackStartOptions(opts)
 
+  if (opts?.customViteSolidPlugin !== true) {
+    console.warn(
+      `please add the vite-solid plugin to your Vite config and set 'customViteSolidPlugin: true'`,
+    )
+    console.warn(
+      `TanStack Start will not configure the vite-solid plugin in future anymore.`,
+    )
+  }
+
   return [
     TanStackStartVitePluginCore(
       {
@@ -53,7 +62,7 @@ export default createStartHandler({
       },
       options,
     ),
-    viteSolid({ ...options.solid, ssr: true }),
+    !opts?.customViteSolidPlugin && viteSolid({ ...options.solid, ssr: true }),
   ]
 }
 

packages/solid-start-plugin/src/schema.ts

@@ -7,10 +7,12 @@ import type { Options as ViteSolidOptions } from 'vite-plugin-solid'
 
 export type WithSolidPlugin = {
   solid?: ViteSolidOptions
+  customViteSolidPlugin?: boolean
 }
 
 const frameworkPlugin = {
   solid: z.custom<ViteSolidOptions>().optional(),
+  customViteSolidPlugin: z.boolean().optional().default(false),
 }
 
 // eslint-disable-next-line unused-imports/no-unused-vars