diff --git a/e2e/cases/react/react-compiler-babel/index.test.ts b/e2e/cases/react/react-compiler-babel/index.test.ts
new file mode 100644
index 0000000000..de6a8c0627
--- /dev/null
+++ b/e2e/cases/react/react-compiler-babel/index.test.ts
@@ -0,0 +1,42 @@
+import { build, dev, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+ 'should render basic React component in development correctly',
+ async ({ page }) => {
+ const rsbuild = await dev({
+ cwd: __dirname,
+ });
+
+ await gotoPage(page, rsbuild);
+
+ const button = page.locator('#button');
+ await expect(button).toHaveText('count: 0');
+ button.click();
+ await expect(button).toHaveText('count: 1');
+
+ rsbuild.close();
+ },
+);
+
+rspackOnlyTest(
+ 'should render basic React component in production correctly',
+ async ({ page }) => {
+ const rsbuild = await build({
+ cwd: __dirname,
+ runServer: true,
+ });
+
+ await gotoPage(page, rsbuild);
+
+ const button = page.locator('#button');
+ await expect(button).toHaveText('count: 0');
+ button.click();
+ await expect(button).toHaveText('count: 1');
+
+ const index = await rsbuild.getIndexFile();
+ expect(index.content).toContain('memo_cache_sentinel');
+
+ rsbuild.close();
+ },
+);
diff --git a/e2e/cases/react/react-compiler-babel/package.json b/e2e/cases/react/react-compiler-babel/package.json
new file mode 100644
index 0000000000..88056bf184
--- /dev/null
+++ b/e2e/cases/react/react-compiler-babel/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "@e2e/react-compiler-babel",
+ "version": "1.0.0",
+ "private": true,
+ "dependencies": {
+ "react": "19.0.0-rc-6d3110b4d9-20240531",
+ "react-dom": "19.0.0-rc-6d3110b4d9-20240531"
+ },
+ "devDependencies": {
+ "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601"
+ }
+}
diff --git a/e2e/cases/react/react-compiler-babel/rsbuild.config.ts b/e2e/cases/react/react-compiler-babel/rsbuild.config.ts
new file mode 100644
index 0000000000..0d4f521898
--- /dev/null
+++ b/e2e/cases/react/react-compiler-babel/rsbuild.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+ plugins: [
+ pluginReact(),
+ pluginBabel({
+ include: /\.(?:jsx|tsx)$/,
+ babelLoaderOptions(opts) {
+ opts.plugins?.unshift(require.resolve('babel-plugin-react-compiler'));
+ },
+ }),
+ ],
+});
diff --git a/e2e/cases/react/react-compiler-babel/src/App.jsx b/e2e/cases/react/react-compiler-babel/src/App.jsx
new file mode 100644
index 0000000000..c1cfb36706
--- /dev/null
+++ b/e2e/cases/react/react-compiler-babel/src/App.jsx
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+const App = () => {
+ const [count, setCount] = useState(0);
+
+ return (
+ <>
+
+
+
Rsbuild with React
+
Start building amazing things with Rsbuild.
+
+ >
+ );
+};
+
+export default App;
diff --git a/e2e/cases/react/react-compiler-babel/src/index.js b/e2e/cases/react/react-compiler-babel/src/index.js
new file mode 100644
index 0000000000..5ceb026ccc
--- /dev/null
+++ b/e2e/cases/react/react-compiler-babel/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+ const root = createRoot(container);
+ root.render(React.createElement(App));
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6046017e30..7788ee519e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -263,6 +263,19 @@ importers:
specifier: ^3.4.19
version: 3.4.23(typescript@5.4.5)
+ e2e/cases/react/react-compiler-babel:
+ dependencies:
+ react:
+ specifier: 19.0.0-rc-6d3110b4d9-20240531
+ version: 19.0.0-rc-6d3110b4d9-20240531
+ react-dom:
+ specifier: 19.0.0-rc-6d3110b4d9-20240531
+ version: 19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531)
+ devDependencies:
+ babel-plugin-react-compiler:
+ specifier: 0.0.0-experimental-938cd9a-20240601
+ version: 0.0.0-experimental-938cd9a-20240601
+
e2e/cases/resolve-pkg-imports: {}
e2e/cases/rsdoctor/mock: {}
@@ -306,7 +319,7 @@ importers:
version: link:../../../packages/plugin-styled-components
styled-components:
specifier: ^6.1.11
- version: 6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ version: 6.1.11(react-dom@19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531))(react@19.0.0-rc-6d3110b4d9-20240531)
e2e/cases/svelte:
dependencies:
@@ -1917,6 +1930,9 @@ packages:
resolution: {integrity: sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==}
engines: {node: '>=6.9.0'}
+ '@babel/generator@7.2.0':
+ resolution: {integrity: sha512-BA75MVfRlFQG2EZgFYIwyT1r6xSkwfP2bdkY/kLZusEYWiJs4xCowab/alaEaT0wSvmVuXGqiefeBlP+7V1yKg==}
+
'@babel/generator@7.24.5':
resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==}
engines: {node: '>=6.9.0'}
@@ -2998,6 +3014,10 @@ packages:
resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+ '@jest/types@24.9.0':
+ resolution: {integrity: sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==}
+ engines: {node: '>= 6'}
+
'@jest/types@29.6.3':
resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3792,6 +3812,9 @@ packages:
'@types/istanbul-lib-report@3.0.3':
resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+ '@types/istanbul-reports@1.1.2':
+ resolution: {integrity: sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==}
+
'@types/istanbul-reports@3.0.4':
resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
@@ -3903,6 +3926,9 @@ packages:
'@types/yargs-parser@21.0.3':
resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+ '@types/yargs@13.0.12':
+ resolution: {integrity: sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==}
+
'@types/yargs@17.0.32':
resolution: {integrity: sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==}
@@ -4155,6 +4181,10 @@ packages:
resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
engines: {node: '>=8'}
+ ansi-regex@4.1.1:
+ resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
+ engines: {node: '>=6'}
+
ansi-regex@5.0.1:
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
engines: {node: '>=8'}
@@ -4279,6 +4309,9 @@ packages:
peerDependencies:
'@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+ babel-plugin-react-compiler@0.0.0-experimental-938cd9a-20240601:
+ resolution: {integrity: sha512-t+uBHxbfxq2z4j83ZYgOsV0dlSaRgPfhrYB5+CMv6ByXUAv5wm7m7YLFx67fWKrG3eDhq3+KH1OMeFypuDLkUA==}
+
babel-plugin-vue-jsx-hmr@1.0.0:
resolution: {integrity: sha512-XRq+XTD4bub6HkavELMhihvLX2++JkSBAxRXlqQK32b+Tb0S9PEqxrDSMpOEZ1iGyOaJZj9Y0uU/FzICdyL9MA==}
@@ -7417,6 +7450,10 @@ packages:
engines: {node: '>=14'}
hasBin: true
+ pretty-format@24.9.0:
+ resolution: {integrity: sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==}
+ engines: {node: '>= 6'}
+
pretty-format@29.7.0:
resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7536,6 +7573,11 @@ packages:
peerDependencies:
react: ^18.3.1
+ react-dom@19.0.0-rc-6d3110b4d9-20240531:
+ resolution: {integrity: sha512-+dPxMs8RKrvt+rqc+yXLxjUV8D4WyrsvhlKrIm+Sfcek3t+tQfp0L9nHqiFrYnWmr2QGUijAZr18JK6GMHkYAw==}
+ peerDependencies:
+ react: 19.0.0-rc-6d3110b4d9-20240531
+
react-fast-compare@3.2.2:
resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
@@ -7586,6 +7628,10 @@ packages:
resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
engines: {node: '>=0.10.0'}
+ react@19.0.0-rc-6d3110b4d9-20240531:
+ resolution: {integrity: sha512-PeNhsJDvPc12kjbohywr1Mgl3J53LzbUTTpE5A5uqQxlA/ZcXs2ErZvBndiYBT3jqqgnqCcGIdvvZ8A0r0FsAQ==}
+ engines: {node: '>=0.10.0'}
+
read-cache@1.0.0:
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
@@ -7962,6 +8008,9 @@ packages:
scheduler@0.23.2:
resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+ scheduler@0.25.0-rc-6d3110b4d9-20240531:
+ resolution: {integrity: sha512-DQp/XrKAuIFX153kxp1yVa8dLuGRcm/z8RAGLLEv97iEMrFlwyOXx+AIvPk3jLrX1Y68oDyNBfXh3Su7LDGcOg==}
+
schema-utils@3.3.0:
resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
engines: {node: '>= 10.13.0'}
@@ -8122,6 +8171,10 @@ packages:
source-map-support@0.5.21:
resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+ source-map@0.5.7:
+ resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+ engines: {node: '>=0.10.0'}
+
source-map@0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
@@ -8484,6 +8537,10 @@ packages:
resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
engines: {node: '>=8'}
+ trim-right@1.0.1:
+ resolution: {integrity: sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==}
+ engines: {node: '>=0.10.0'}
+
trough@2.2.0:
resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
@@ -9012,6 +9069,15 @@ packages:
resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
engines: {node: '>=12.20'}
+ zod-validation-error@2.1.0:
+ resolution: {integrity: sha512-VJh93e2wb4c3tWtGgTa0OF/dTt/zoPCPzXq4V11ZjxmEAFaPi/Zss1xIZdEB5RD8GD00U0/iVXgqkF77RV7pdQ==}
+ engines: {node: '>=18.0.0'}
+ peerDependencies:
+ zod: ^3.18.0
+
+ zod@3.23.8:
+ resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+
zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
@@ -9115,6 +9181,14 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ '@babel/generator@7.2.0':
+ dependencies:
+ '@babel/types': 7.24.6
+ jsesc: 2.5.2
+ lodash: 4.17.21
+ source-map: 0.5.7
+ trim-right: 1.0.1
+
'@babel/generator@7.24.5':
dependencies:
'@babel/types': 7.24.6
@@ -10383,6 +10457,12 @@ snapshots:
dependencies:
'@sinclair/typebox': 0.27.8
+ '@jest/types@24.9.0':
+ dependencies:
+ '@types/istanbul-lib-coverage': 2.0.6
+ '@types/istanbul-reports': 1.1.2
+ '@types/yargs': 13.0.12
+
'@jest/types@29.6.3':
dependencies:
'@jest/schemas': 29.6.3
@@ -11264,6 +11344,11 @@ snapshots:
dependencies:
'@types/istanbul-lib-coverage': 2.0.6
+ '@types/istanbul-reports@1.1.2':
+ dependencies:
+ '@types/istanbul-lib-coverage': 2.0.6
+ '@types/istanbul-lib-report': 3.0.3
+
'@types/istanbul-reports@3.0.4':
dependencies:
'@types/istanbul-lib-report': 3.0.3
@@ -11388,6 +11473,10 @@ snapshots:
'@types/yargs-parser@21.0.3': {}
+ '@types/yargs@13.0.12':
+ dependencies:
+ '@types/yargs-parser': 21.0.3
+
'@types/yargs@17.0.32':
dependencies:
'@types/yargs-parser': 21.0.3
@@ -11794,6 +11883,8 @@ snapshots:
dependencies:
type-fest: 0.21.3
+ ansi-regex@4.1.1: {}
+
ansi-regex@5.0.1: {}
ansi-regex@6.0.1: {}
@@ -11929,6 +12020,16 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ babel-plugin-react-compiler@0.0.0-experimental-938cd9a-20240601:
+ dependencies:
+ '@babel/generator': 7.2.0
+ '@babel/types': 7.24.6
+ chalk: 4.1.2
+ invariant: 2.2.4
+ pretty-format: 24.9.0
+ zod: 3.23.8
+ zod-validation-error: 2.1.0(zod@3.23.8)
+
babel-plugin-vue-jsx-hmr@1.0.0:
dependencies:
'@babel/core': 7.24.6
@@ -15552,6 +15653,13 @@ snapshots:
prettier@3.2.5: {}
+ pretty-format@24.9.0:
+ dependencies:
+ '@jest/types': 24.9.0
+ ansi-regex: 4.1.1
+ ansi-styles: 3.2.1
+ react-is: 16.13.1
+
pretty-format@29.7.0:
dependencies:
'@jest/schemas': 29.6.3
@@ -15700,6 +15808,11 @@ snapshots:
react: 18.3.1
scheduler: 0.23.2
+ react-dom@19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531):
+ dependencies:
+ react: 19.0.0-rc-6d3110b4d9-20240531
+ scheduler: 0.25.0-rc-6d3110b4d9-20240531
+
react-fast-compare@3.2.2: {}
react-helmet-async@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -15754,6 +15867,8 @@ snapshots:
dependencies:
loose-envify: 1.4.0
+ react@19.0.0-rc-6d3110b4d9-20240531: {}
+
read-cache@1.0.0:
dependencies:
pify: 2.3.0
@@ -16175,6 +16290,8 @@ snapshots:
dependencies:
loose-envify: 1.4.0
+ scheduler@0.25.0-rc-6d3110b4d9-20240531: {}
+
schema-utils@3.3.0:
dependencies:
'@types/json-schema': 7.0.15
@@ -16343,6 +16460,8 @@ snapshots:
buffer-from: 1.1.2
source-map: 0.6.1
+ source-map@0.5.7: {}
+
source-map@0.6.1: {}
source-map@0.7.4: {}
@@ -16467,7 +16586,7 @@ snapshots:
dependencies:
inline-style-parser: 0.2.3
- styled-components@6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ styled-components@6.1.11(react-dom@19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531))(react@19.0.0-rc-6d3110b4d9-20240531):
dependencies:
'@emotion/is-prop-valid': 1.2.2
'@emotion/unitless': 0.8.1
@@ -16475,8 +16594,8 @@ snapshots:
css-to-react-native: 3.2.0
csstype: 3.1.3
postcss: 8.4.38
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
+ react: 19.0.0-rc-6d3110b4d9-20240531
+ react-dom: 19.0.0-rc-6d3110b4d9-20240531(react@19.0.0-rc-6d3110b4d9-20240531)
shallowequal: 1.1.0
stylis: 4.3.2
tslib: 2.6.2
@@ -16719,6 +16838,8 @@ snapshots:
trim-newlines@3.0.1: {}
+ trim-right@1.0.1: {}
+
trough@2.2.0: {}
trouter@2.0.1:
@@ -17360,4 +17481,10 @@ snapshots:
yocto-queue@1.0.0: {}
+ zod-validation-error@2.1.0(zod@3.23.8):
+ dependencies:
+ zod: 3.23.8
+
+ zod@3.23.8: {}
+
zwitch@2.0.4: {}