@amir-rahmanii the vite-plugin-babel approach is broken for two reasons:

1. default filter skips .tsx/.ts files. vite-plugin-babel's default regex is /\.jsx?$/, so your TypeScript components are silently ignored. the compiler never sees them. this is tracked in reactjs/react.dev#8148.

2. double-transform conflict. @vitejs/plugin-react already runs babel internally for JSX + Fast Refresh. adding vite-plugin-babel creates a second, separate babel pass. the React Compiler needs to see original source code, but by the time the second pass runs, JSX is already transformed.

the correct setup is to pass the compiler through @vitejs/plugin-react's built-in babel option:

// vite.config.ts
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

this works because @vitejs/plugin-react runs your plugins before its built-in transforms, satisfying the compiler's "run first" requirement. it handles .tsx correctly and keeps everything in a single babel pass with proper sourcemaps.

no need for vite-plugin-babel at all. the react docs still list it as an "alternative" but it's effectively broken (#8148, #8215).

ref: react compiler installation docs | @vitejs/plugin-react

el problema suele ser tener el compiler en dos sitios a la vez, en babel y en react plugin. ponlos por separado y verifica con react devtools que aparece el icono del compilador