diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51c9e53c3..e436606cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3140,7 +3140,7 @@ importers:
         specifier: 2.2.1
         version: 2.2.1(@rspack/core@2.2.8)(selfsigned@5.5.0)
 
-  rspack/react-compiler-babel:
+  rspack/react-compiler:
     dependencies:
       '@swc/helpers':
         specifier: ^0.5.23
@@ -3155,9 +3155,6 @@ importers:
         specifier: 0.19.0
         version: 0.19.0
     devDependencies:
-      '@babel/plugin-syntax-jsx':
-        specifier: ^7.29.7
-        version: 7.29.7(@babel/core@7.29.7)
       '@rspack/cli':
         specifier: 2.2.8
         version: 2.2.8(@rspack/core@2.2.8)(@rspack/dev-server@2.2.1)
@@ -3167,14 +3164,8 @@ importers:
       '@rspack/dev-server':
         specifier: 2.2.1
         version: 2.2.1(@rspack/core@2.2.8)(selfsigned@5.5.0)
-      babel-loader:
-        specifier: ^10.1.1
-        version: 10.1.1(@babel/core@7.29.7)(@rspack/core@2.2.8)(webpack@5.102.1)
-      babel-plugin-react-compiler:
-        specifier: ^1.0.0
-        version: 1.0.0
 
-  rspack/react-compiler-babel-ts:
+  rspack/react-compiler-ts:
     dependencies:
       '@swc/helpers':
         specifier: ^0.5.23
@@ -3189,12 +3180,6 @@ importers:
         specifier: 0.19.0
         version: 0.19.0
     devDependencies:
-      '@babel/plugin-syntax-jsx':
-        specifier: ^7.29.7
-        version: 7.29.7(@babel/core@7.29.7)
-      '@babel/plugin-syntax-typescript':
-        specifier: ^7.29.7
-        version: 7.29.7(@babel/core@7.29.7)
       '@rspack/cli':
         specifier: 2.2.8
         version: 2.2.8(@rspack/core@2.2.8)(@rspack/dev-server@2.2.1)
@@ -3213,12 +3198,6 @@ importers:
       '@types/react-dom':
         specifier: ^19.3.0
         version: 19.3.0(@types/react@19.3.0)
-      babel-loader:
-        specifier: ^10.1.1
-        version: 10.1.1(@babel/core@7.29.7)(@rspack/core@2.2.8)(webpack@5.102.1)
-      babel-plugin-react-compiler:
-        specifier: ^1.0.0
-        version: 1.0.0
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
diff --git a/rspack/react-compiler-babel-ts/babel.config.js b/rspack/react-compiler-babel-ts/babel.config.js
deleted file mode 100644
index 4ef52232a..000000000
--- a/rspack/react-compiler-babel-ts/babel.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// babel.config.js
-const ReactCompilerConfig = {/* ... */};
-
-export default {
-  plugins: [
-    ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
-    '@babel/plugin-syntax-jsx',
-    ['@babel/plugin-syntax-typescript', { isTSX: true }],
-  ],
-};
diff --git a/rspack/react-compiler-babel-ts/rspack.config.js b/rspack/react-compiler-babel-ts/rspack.config.js
deleted file mode 100644
index 7a4821bb8..000000000
--- a/rspack/react-compiler-babel-ts/rspack.config.js
+++ /dev/null
@@ -1,66 +0,0 @@
-// @ts-check
-import { defineConfig } from '@rspack/cli';
-import { rspack } from '@rspack/core';
-
-export default defineConfig({
-  entry: {
-    main: './src/index.tsx',
-  },
-  resolve: {
-    extensions: ['...', '.jsx', '.tsx', '.ts'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        type: 'css',
-      },
-      {
-        test: /\.(?:js|mjs|cjs|ts|mts|cts)$/,
-        exclude: [/[\\/]node_modules[\\/]/],
-        use: [
-          {
-            loader: 'builtin:swc-loader',
-            options: {
-              detectSyntax: 'auto',
-              jsc: {
-                externalHelpers: true,
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(?:jsx|tsx)$/,
-        use: [
-          {
-            loader: 'builtin:swc-loader',
-            options: {
-              detectSyntax: 'auto',
-              jsc: {
-                externalHelpers: true,
-                transform: {
-                  react: {
-                    runtime: 'automatic',
-                  },
-                },
-              },
-            },
-          },
-          {
-            loader: 'babel-loader',
-          },
-        ],
-      },
-      {
-        test: /\.(png|svg|jpg)$/,
-        type: 'asset/resource',
-      },
-    ],
-  },
-  plugins: [
-    new rspack.HtmlRspackPlugin({
-      template: './index.html',
-    }),
-  ],
-});
diff --git a/rspack/react-compiler-babel/babel.config.js b/rspack/react-compiler-babel/babel.config.js
deleted file mode 100644
index 6b5438722..000000000
--- a/rspack/react-compiler-babel/babel.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// babel.config.js
-const ReactCompilerConfig = {/* ... */};
-
-export default {
-  plugins: [
-    ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
-    '@babel/plugin-syntax-jsx',
-  ],
-};
diff --git a/rspack/react-compiler-babel-ts/index.html b/rspack/react-compiler-ts/index.html
similarity index 100%
rename from rspack/react-compiler-babel-ts/index.html
rename to rspack/react-compiler-ts/index.html
diff --git a/rspack/react-compiler-babel-ts/package.json b/rspack/react-compiler-ts/package.json
similarity index 70%
rename from rspack/react-compiler-babel-ts/package.json
rename to rspack/react-compiler-ts/package.json
index d9c86839e..59ba869c2 100644
--- a/rspack/react-compiler-babel-ts/package.json
+++ b/rspack/react-compiler-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@rspack-example/react-compiler-babel-ts",
+  "name": "@rspack-example/react-compiler-ts",
   "version": "1.0.0",
   "private": true,
   "license": "MIT",
@@ -15,16 +15,12 @@
     "react-refresh": "0.19.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.29.7",
-    "@babel/plugin-syntax-typescript": "^7.29.7",
     "@rspack/cli": "2.2.8",
     "@rspack/core": "2.2.8",
     "@rspack/dev-server": "2.2.1",
     "@types/node": "^24.19.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "babel-loader": "^10.1.1",
-    "babel-plugin-react-compiler": "^1.0.0",
     "typescript": "^5.9.3"
   }
 }
diff --git a/rspack/react-compiler-ts/rspack.config.js b/rspack/react-compiler-ts/rspack.config.js
new file mode 100644
index 000000000..1dcf7baea
--- /dev/null
+++ b/rspack/react-compiler-ts/rspack.config.js
@@ -0,0 +1,48 @@
+// @ts-check
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+export default defineConfig({
+  entry: {
+    main: './src/index.tsx',
+  },
+  resolve: {
+    extensions: ['...', '.jsx', '.tsx', '.ts'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        type: 'css',
+      },
+      {
+        test: /\.(?:js|mjs|jsx|ts|tsx)$/,
+        exclude: [/[\\/]node_modules[\\/]/],
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            detectSyntax: 'auto',
+            jsc: {
+              externalHelpers: true,
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+                reactCompiler: true,
+              },
+            },
+          },
+        },
+      },
+      {
+        test: /\.(png|svg|jpg)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+  ],
+});
diff --git a/rspack/react-compiler-babel/src/App.css b/rspack/react-compiler-ts/src/App.css
similarity index 84%
rename from rspack/react-compiler-babel/src/App.css
rename to rspack/react-compiler-ts/src/App.css
index 74b5e0534..1c7b51c75 100644
--- a/rspack/react-compiler-babel/src/App.css
+++ b/rspack/react-compiler-ts/src/App.css
@@ -28,6 +28,13 @@
   color: #61dafb;
 }
 
+.App-header button {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/rspack/react-compiler-babel-ts/src/App.tsx b/rspack/react-compiler-ts/src/App.tsx
similarity index 67%
rename from rspack/react-compiler-babel-ts/src/App.tsx
rename to rspack/react-compiler-ts/src/App.tsx
index ce9cbd294..35ba1601f 100644
--- a/rspack/react-compiler-babel-ts/src/App.tsx
+++ b/rspack/react-compiler-ts/src/App.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { useCounter } from './useCounter';
 
 function App() {
+  const { count, increment } = useCounter();
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit <code>src/App.tsx</code> and save to reload.
         </p>
+        <button type="button" onClick={increment}>
+          Count: {count}
+        </button>
         <a
           className="App-link"
           href="https://reactjs.org"
diff --git a/rspack/react-compiler-babel-ts/src/assets.d.ts b/rspack/react-compiler-ts/src/assets.d.ts
similarity index 100%
rename from rspack/react-compiler-babel-ts/src/assets.d.ts
rename to rspack/react-compiler-ts/src/assets.d.ts
diff --git a/rspack/react-compiler-babel-ts/src/env.d.ts b/rspack/react-compiler-ts/src/env.d.ts
similarity index 100%
rename from rspack/react-compiler-babel-ts/src/env.d.ts
rename to rspack/react-compiler-ts/src/env.d.ts
diff --git a/rspack/react-compiler-babel-ts/src/index.css b/rspack/react-compiler-ts/src/index.css
similarity index 100%
rename from rspack/react-compiler-babel-ts/src/index.css
rename to rspack/react-compiler-ts/src/index.css
diff --git a/rspack/react-compiler-babel-ts/src/index.tsx b/rspack/react-compiler-ts/src/index.tsx
similarity index 100%
rename from rspack/react-compiler-babel-ts/src/index.tsx
rename to rspack/react-compiler-ts/src/index.tsx
diff --git a/rspack/react-compiler-babel-ts/src/logo.svg b/rspack/react-compiler-ts/src/logo.svg
similarity index 100%
rename from rspack/react-compiler-babel-ts/src/logo.svg
rename to rspack/react-compiler-ts/src/logo.svg
diff --git a/rspack/react-compiler-ts/src/useCounter.ts b/rspack/react-compiler-ts/src/useCounter.ts
new file mode 100644
index 000000000..0b3e9df04
--- /dev/null
+++ b/rspack/react-compiler-ts/src/useCounter.ts
@@ -0,0 +1,7 @@
+import { useState } from 'react';
+
+export function useCounter(initial = 0) {
+  const [count, setCount] = useState(initial);
+  const increment = () => setCount((c) => c + 1);
+  return { count, increment };
+}
diff --git a/rspack/react-compiler-babel-ts/tsconfig.json b/rspack/react-compiler-ts/tsconfig.json
similarity index 100%
rename from rspack/react-compiler-babel-ts/tsconfig.json
rename to rspack/react-compiler-ts/tsconfig.json
diff --git a/rspack/react-compiler-babel/index.html b/rspack/react-compiler/index.html
similarity index 100%
rename from rspack/react-compiler-babel/index.html
rename to rspack/react-compiler/index.html
diff --git a/rspack/react-compiler-babel/package.json b/rspack/react-compiler/package.json
similarity index 65%
rename from rspack/react-compiler-babel/package.json
rename to rspack/react-compiler/package.json
index cbe76fd57..5e6f72655 100644
--- a/rspack/react-compiler-babel/package.json
+++ b/rspack/react-compiler/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@rspack-example/react-compiler-babel",
+  "name": "@rspack-example/react-compiler",
   "version": "1.0.0",
   "private": true,
   "license": "MIT",
@@ -15,11 +15,8 @@
     "react-refresh": "0.19.0"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.29.7",
     "@rspack/cli": "2.2.8",
     "@rspack/core": "2.2.8",
-    "@rspack/dev-server": "2.2.1",
-    "babel-loader": "^10.1.1",
-    "babel-plugin-react-compiler": "^1.0.0"
+    "@rspack/dev-server": "2.2.1"
   }
 }
diff --git a/rspack/react-compiler-babel/rspack.config.js b/rspack/react-compiler/rspack.config.js
similarity index 51%
rename from rspack/react-compiler-babel/rspack.config.js
rename to rspack/react-compiler/rspack.config.js
index 68bff5ff2..ff88800e6 100644
--- a/rspack/react-compiler-babel/rspack.config.js
+++ b/rspack/react-compiler/rspack.config.js
@@ -22,41 +22,23 @@ export default defineConfig({
         type: 'css',
       },
       {
-        test: /\.(?:js|mjs|cjs)$/,
+        test: /\.(?:js|mjs|jsx)$/,
         exclude: [/[\\/]node_modules[\\/]/],
-        use: [
-          {
-            loader: 'builtin:swc-loader',
-            options: {
-              detectSyntax: 'auto',
-              jsc: {
-                externalHelpers: true,
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.jsx$/,
-        use: [
-          {
-            loader: 'builtin:swc-loader',
-            options: {
-              detectSyntax: 'auto',
-              jsc: {
-                externalHelpers: true,
-                transform: {
-                  react: {
-                    runtime: 'automatic',
-                  },
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            detectSyntax: 'auto',
+            jsc: {
+              externalHelpers: true,
+              transform: {
+                react: {
+                  runtime: 'automatic',
                 },
+                reactCompiler: true,
               },
             },
           },
-          {
-            loader: 'babel-loader',
-          },
-        ],
+        },
       },
       {
         test: /\.(png|svg|jpg)$/,
diff --git a/rspack/react-compiler-babel-ts/src/App.css b/rspack/react-compiler/src/App.css
similarity index 100%
rename from rspack/react-compiler-babel-ts/src/App.css
rename to rspack/react-compiler/src/App.css
diff --git a/rspack/react-compiler-babel/src/App.jsx b/rspack/react-compiler/src/App.jsx
similarity index 100%
rename from rspack/react-compiler-babel/src/App.jsx
rename to rspack/react-compiler/src/App.jsx
diff --git a/rspack/react-compiler-babel/src/index.css b/rspack/react-compiler/src/index.css
similarity index 100%
rename from rspack/react-compiler-babel/src/index.css
rename to rspack/react-compiler/src/index.css
diff --git a/rspack/react-compiler-babel/src/index.jsx b/rspack/react-compiler/src/index.jsx
similarity index 100%
rename from rspack/react-compiler-babel/src/index.jsx
rename to rspack/react-compiler/src/index.jsx
diff --git a/rspack/react-compiler-babel/src/logo.svg b/rspack/react-compiler/src/logo.svg
similarity index 100%
rename from rspack/react-compiler-babel/src/logo.svg
rename to rspack/react-compiler/src/logo.svg