Skip to content

[cna] Add reactCompiler option #82251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 30, 2025
Merged

[cna] Add reactCompiler option #82251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1d2462
[cna] Add `reactCompiler` option
poteto Jul 31, 2025
e64b2a7
Don't test all new combinations
eps1lon Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/create-next-app/create-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export async function createApp({
turbopack,
rspack,
disableGit,
reactCompiler,
}: {
appPath: string
packageManager: PackageManager
Expand All @@ -60,6 +61,7 @@ export async function createApp({
turbopack: boolean
rspack: boolean
disableGit?: boolean
reactCompiler: boolean
}): Promise<void> {
let repoInfo: RepoInfo | undefined
const mode: TemplateMode = typescript ? 'ts' : 'js'
Expand Down Expand Up @@ -252,6 +254,7 @@ export async function createApp({
skipInstall,
turbopack,
rspack,
reactCompiler,
})
}

Expand Down
28 changes: 28 additions & 0 deletions packages/create-next-app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const program = new Command(packageJson.name)
.option('--ts, --typescript', 'Initialize as a TypeScript project. (default)')
.option('--js, --javascript', 'Initialize as a JavaScript project.')
.option('--tailwind', 'Initialize with Tailwind CSS config. (default)')
.option('--react-compiler', 'Initialize with React Compiler enabled.')
.option('--eslint', 'Initialize with ESLint config.')
.option('--biome', 'Initialize with Biome config.')
.option('--app', 'Initialize as an App Router project.')
Expand Down Expand Up @@ -239,6 +240,7 @@ async function run(): Promise<void> {
empty: false,
turbopack: true,
disableGit: false,
reactCompiler: false,
}
const getPrefOrDefault = (field: string) =>
preferences[field] ?? defaults[field]
Expand Down Expand Up @@ -346,6 +348,30 @@ async function run(): Promise<void> {
preferences.eslint = false
}

if (
!opts.reactCompiler &&
!args.includes('--no-react-compiler') &&
!opts.api
) {
if (skipPrompt) {
opts.reactCompiler = getPrefOrDefault('reactCompiler')
} else {
const styledReactCompiler = blue('React Compiler')
const { reactCompiler } = await prompts({
onState: onPromptState,
type: 'toggle',
name: 'reactCompiler',
// TODO: Remove "Release Candidate" when React Compiler is stable
message: `Would you like to use ${styledReactCompiler} (Release Candidate)?`,
initial: getPrefOrDefault('reactCompiler'),
active: 'Yes',
inactive: 'No',
})
opts.reactCompiler = Boolean(reactCompiler)
preferences.reactCompiler = Boolean(reactCompiler)
}
}

if (!opts.tailwind && !args.includes('--no-tailwind') && !opts.api) {
if (skipPrompt) {
opts.tailwind = getPrefOrDefault('tailwind')
Expand Down Expand Up @@ -486,6 +512,7 @@ async function run(): Promise<void> {
turbopack: opts.turbopack,
rspack: opts.rspack,
disableGit: opts.disableGit,
reactCompiler: opts.reactCompiler,
})
} catch (reason) {
if (!(reason instanceof DownloadError)) {
Expand Down Expand Up @@ -520,6 +547,7 @@ async function run(): Promise<void> {
turbopack: opts.turbopack,
rspack: opts.rspack,
disableGit: opts.disableGit,
reactCompiler: opts.reactCompiler,
})
}
conf.set('preferences', preferences)
Expand Down
28 changes: 28 additions & 0 deletions packages/create-next-app/templates/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const installTemplate = async ({
skipInstall,
turbopack,
rspack,
reactCompiler,
}: InstallTemplateArgs) => {
console.log(bold(`Using ${packageManager}.`));

Expand Down Expand Up @@ -96,6 +97,28 @@ export const installTemplate = async ({
);
}

if (reactCompiler) {
const nextConfigFile = path.join(
root,
mode === "js" ? "next.config.mjs" : "next.config.ts",
);
let configContent = await fs.readFile(nextConfigFile, "utf8");

if (mode === "ts") {
configContent = configContent.replace(
"const nextConfig: NextConfig = {\n /* config options here */\n};",
`const nextConfig: NextConfig = {\n reactCompiler: true,\n};`,
);
} else {
configContent = configContent.replace(
"const nextConfig = {};",
`const nextConfig = {\n reactCompiler: true,\n};`,
);
}

await fs.writeFile(nextConfigFile, configContent);
}

const tsconfigFile = path.join(
root,
mode === "js" ? "jsconfig.json" : "tsconfig.json",
Expand Down Expand Up @@ -223,6 +246,11 @@ export const installTemplate = async ({
}
}

if (reactCompiler) {
// TODO: Use "^19" when React Compiler is stable
packageJson.devDependencies["babel-plugin-react-compiler"] = "19.1.0-rc.3";
}

/**
* TypeScript projects will have type definitions and other devDependencies.
*/
Expand Down
1 change: 1 addition & 0 deletions packages/create-next-app/templates/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,5 @@ export interface InstallTemplateArgs {
skipInstall: boolean;
turbopack: boolean;
rspack: boolean;
reactCompiler: boolean;
}
5 changes: 5 additions & 0 deletions test/integration/create-next-app/biome-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe('create-next-app Biome configuration', () => {
'--app',
'--no-turbopack',
'--no-import-alias',
'--no-react-compiler',
'--skip-install',
],
nextTgzFilename,
Expand Down Expand Up @@ -59,6 +60,7 @@ describe('create-next-app Biome configuration', () => {
'--app',
'--no-turbopack',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{ cwd }
Expand Down Expand Up @@ -95,6 +97,7 @@ describe('create-next-app Biome configuration', () => {
'--app',
'--no-turbopack',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{ cwd }
Expand Down Expand Up @@ -131,6 +134,7 @@ describe('create-next-app Biome configuration', () => {
'--app',
'--no-turbopack',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{ cwd }
Expand Down Expand Up @@ -167,6 +171,7 @@ describe('create-next-app Biome configuration', () => {
'--app',
'--no-turbopack',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{ cwd }
Expand Down
2 changes: 2 additions & 0 deletions test/integration/create-next-app/eslint-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ describe('create-next-app ESLint configuration', () => {
'--eslint',
'--no-tailwind',
'--no-src-dir',
'--no-react-compiler',
'--app',
'--no-turbopack',
'--no-import-alias',
Expand Down Expand Up @@ -76,6 +77,7 @@ describe('create-next-app ESLint configuration', () => {
'--eslint',
'--no-tailwind',
'--no-src-dir',
'--no-react-compiler',
'--app',
'--no-turbopack',
'--no-import-alias',
Expand Down
3 changes: 3 additions & 0 deletions test/integration/create-next-app/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ describe('create-next-app', () => {
'--no-tailwind',
'--no-src-dir',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -81,6 +82,7 @@ describe('create-next-app', () => {
'--no-tailwind',
'--no-src-dir',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -113,6 +115,7 @@ describe('create-next-app', () => {
'--no-src-dir',
'--no-import-alias',
'--skip-install',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down
2 changes: 2 additions & 0 deletions test/integration/create-next-app/package-manager/bun.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ describe('create-next-app with package manager bun', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down Expand Up @@ -78,6 +79,7 @@ describe('create-next-app with package manager bun', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down
2 changes: 2 additions & 0 deletions test/integration/create-next-app/package-manager/npm.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ describe('create-next-app with package manager npm', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down Expand Up @@ -67,6 +68,7 @@ describe('create-next-app with package manager npm', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down
2 changes: 2 additions & 0 deletions test/integration/create-next-app/package-manager/pnpm.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ describe('create-next-app with package manager pnpm', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down Expand Up @@ -67,6 +68,7 @@ describe('create-next-app with package manager pnpm', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down
2 changes: 2 additions & 0 deletions test/integration/create-next-app/package-manager/yarn.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ describe('create-next-app with package manager yarn', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down Expand Up @@ -75,6 +76,7 @@ describe('create-next-app with package manager yarn', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down
4 changes: 4 additions & 0 deletions test/integration/create-next-app/prompts.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ describe('create-next-app prompts', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
{
cwd,
Expand Down Expand Up @@ -68,6 +69,7 @@ describe('create-next-app prompts', () => {
'--no-tailwind',
'--no-src-dir',
'--no-import-alias',
'--no-react-compiler',
],
{
cwd,
Expand Down Expand Up @@ -104,6 +106,7 @@ describe('create-next-app prompts', () => {
'--no-turbopack',
'--no-src-dir',
'--no-import-alias',
'--no-react-compiler',
],
{
cwd,
Expand Down Expand Up @@ -140,6 +143,7 @@ describe('create-next-app prompts', () => {
'--no-turbopack',
'--no-tailwind',
'--no-src-dir',
'--no-react-compiler',
],
{
cwd,
Expand Down
7 changes: 7 additions & 0 deletions test/integration/create-next-app/templates/app.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ describe('create-next-app --app (App Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -65,6 +66,7 @@ describe('create-next-app --app (App Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -93,6 +95,7 @@ describe('create-next-app --app (App Router)', () => {
'--src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -130,6 +133,7 @@ describe('create-next-app --app (App Router)', () => {
'--src-dir',
'--tailwind',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -167,6 +171,7 @@ describe('create-next-app --app (App Router)', () => {
'--empty',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -206,6 +211,7 @@ describe('create-next-app --app (App Router)', () => {
'--tailwind',
'--empty',
'--no-import-alias',
'--no-react-compiler',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
Expand Down Expand Up @@ -245,6 +251,7 @@ describe('create-next-app --app (App Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
'--no-react-compiler',
],
nextTgzFilename,
{
Expand Down
Loading
Loading