T
TanStack•2mo ago
passive-yellow

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(),
  ],
})
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'
    })
  ],
})
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'],
      }
    }),
viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      }
    }),
What am I doing wrong?
3 Replies
relaxed-coral
relaxed-coral•2mo ago
does it work fine when you remove the react compiler plugin? i feel like this may be an issue with the nitro v2 plugin this is my setup with nitro v3 and react compiler and it works fine, for reference: https://github.com/dotnize/react-tanstarter/blob/main/vite.config.ts
passive-yellow
passive-yellowOP•2mo ago
I just made a repo where I was able to get react compiler seemingly working without any errors like from before https://github.com/remusris/tanstack-start-rc-react-compiler#
GitHub
GitHub - remusris/tanstack-start-rc-react-compiler
Contribute to remusris/tanstack-start-rc-react-compiler development by creating an account on GitHub.
passive-yellow
passive-yellowOP•2mo ago
I think the repo below I made uses the same method you are and that is working I was using this older version of react compiler that seemed to be causing the issues "babel-plugin-react-compiler": "19.1.0-rc.2",

Did you find this page helpful?