TanStackT
TanStack•3mo ago•
6 replies
brilliant-lime

How to add react compiler to Tanstack Start RC?

Below is the code I used in the tanstack start beta

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import babel from 'vite-plugin-babel'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tailwindcss(),
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart({
      customViteReactPlugin: true,
      react: {
        babel: {
          plugins: ['babel-plugin-react-compiler'],
        },
      },
      target: 'vercel',
    }),
    react(),
  ],
})


However It seem sthat tanstack start has changed

now this is what my new code looks like

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import babel from 'vite-plugin-babel'
import { nitroV2Plugin } from '@tanstack/nitro-v2-vite-plugin'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart(),
    viteReact(),
    tailwindcss(),    
    nitroV2Plugin({
      preset: 'node-server'
    })
  ],
})


However,

I get this

{"status":500,"unhandled":true,"message":"HTTPError"}

when I change the code to this in the new vite.configuration

viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      }
    }),


What am I doing wrong?
Was this page helpful?