T
TanStack•9mo ago
adverse-sapphire

Vite config issue?

My TSS side project is working fine and I want to add in Clerk. I spun up the TSS Clerk example app and that works fine too. I've copied across the Clerk related stuff into my side project and I'm getting - 
Error: We detected that the '@vitejs/plugin-react' was passed before '@tanstack/start-vite-plugin'. Please make sure that '@tanstack/router-vite-plugin' is passed before '@vitejs/plugin-react' and try again: 
e.g.

plugins: [
  TanStackStartVite(), // Place this before viteReact()
  viteReact(),
]
Error: We detected that the '@vitejs/plugin-react' was passed before '@tanstack/start-vite-plugin'. Please make sure that '@tanstack/router-vite-plugin' is passed before '@vitejs/plugin-react' and try again: 
e.g.

plugins: [
  TanStackStartVite(), // Place this before viteReact()
  viteReact(),
]
My app.config.ts seems pretty vanilla - 
import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
})
import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
})
I'm using the latest versions of everything. Is it possible I've got a library version conflict in my dependencies?
3 Replies
adverse-sapphire
adverse-sapphireOP•9mo ago
It seems to be because I have a createServerFn outside of the Root route Oh wow, that's super funky. Having the following commented out code causes the error to happen. Deleting the commented code fixes the issue. Craaaaazy!! 
// const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
//   const { userId } = await getAuth(getWebRequest())
//   return {
//     userId,
//   }
// })

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient
  userId?: string
}>()({
// const fetchClerkAuth = createServerFn({ method: 'GET' }).handler(async () => {
//   const { userId } = await getAuth(getWebRequest())
//   return {
//     userId,
//   }
// })

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient
  userId?: string
}>()({
In fact just having - 
// createServerFn
// createServerFn
causes it to have conniptions. But if I do - 
// createServerF
// createServerF
It's fine I'm really glad I spent the last few hours figuring that out 😅 If I'm feeling masochistic tomorrow I'll create a minimal repo and raise an issue
genetic-orange
genetic-orange•9mo ago
please do there are still issues with dead code elimination. repros will help us fix those
adverse-sapphire
adverse-sapphireOP•9mo ago
https://github.com/TanStack/router/issues/3121
GitHub
Code comments in __root.tsx can cause vite plugin issue · Issue #...
Which project does this relate to? Start Describe the bug Having code comments in __root.tsx as per the below StackBlitz reproduction can cause this error - 503 Server Unavailable Error: We detecte...

Did you find this page helpful?