From 0a6d37675c24c23fefbc5df4dda8a1dc15b16a58 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Thu, 20 Apr 2023 15:35:44 -0400
Subject: [PATCH] fix(react): use babel-loader when using styled-jsx with
 rspack (#16443)

---
 .../src/generators/application/application.ts | 44 +++++++++++++++++++
 packages/react/src/utils/versions.ts          |  1 +
 2 files changed, 45 insertions(+)

diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts
index 7025b47e6a..a11ccc9323 100644
--- a/packages/react/src/generators/application/application.ts
+++ b/packages/react/src/generators/application/application.ts
@@ -19,7 +19,9 @@ import {
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
+  logger,
   runTasksInSerial,
+  stripIndents,
   Tree,
   updateJson,
 } from '@nx/devkit';
@@ -28,6 +30,7 @@ import reactInitGenerator from '../init/init';
 import { Linter, lintProjectGenerator } from '@nx/linter';
 import { mapLintPattern } from '@nx/linter/src/generators/lint-project/lint-project';
 import {
+  babelLoaderVersion,
   nxRspackVersion,
   nxVersion,
   swcLoaderVersion,
@@ -35,6 +38,7 @@ import {
 import { installCommonDependencies } from './lib/install-common-dependencies';
 import { extractTsConfigBase } from '../../utils/create-ts-config';
 import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';
+import * as chalk from 'chalk';
 
 async function addLinting(host: Tree, options: NormalizedSchema) {
   const tasks: GeneratorCallback[] = [];
@@ -207,6 +211,46 @@ export async function applicationGenerator(
   tasks.push(routingTask);
   setDefaults(host, options);
 
+  if (options.bundler === 'rspack' && options.style === 'styled-jsx') {
+    logger.warn(
+      `${chalk.bold('styled-jsx')} is not supported by ${chalk.bold(
+        'Rspack'
+      )}. We've added ${chalk.bold(
+        'babel-loader'
+      )} to your project, but using babel will slow down your build.`
+    );
+
+    tasks.push(
+      addDependenciesToPackageJson(
+        host,
+        {},
+        { 'babel-loader': babelLoaderVersion }
+      )
+    );
+
+    host.write(
+      joinPathFragments(options.appProjectRoot, 'rspack.config.js'),
+      stripIndents`
+        const { composePlugins, withNx, withWeb } = require('@nrwl/rspack');
+        module.exports = composePlugins(withNx(), withWeb(), (config) => {
+          config.module.rules.push({
+            test: /\\.[jt]sx$/i,
+            use: [
+              {
+                loader: 'babel-loader',
+                options: {
+                  presets: ['@babel/preset-typescript'],
+                  plugins: ['styled-jsx/babel'],
+                },
+              },
+            ],
+          });
+          return config;
+        });
+        `
+    );
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }
diff --git a/packages/react/src/utils/versions.ts b/packages/react/src/utils/versions.ts
index e531d5fe39..c3d7cc00be 100755
--- a/packages/react/src/utils/versions.ts
+++ b/packages/react/src/utils/versions.ts
@@ -7,6 +7,7 @@ export const reactVersion = '18.2.0';
 export const reactDomVersion = '18.2.0';
 export const reactIsVersion = '18.2.0';
 export const swcLoaderVersion = '0.1.15';
+export const babelLoaderVersion = '^9.1.2';
 export const typesReactVersion = '18.0.28';
 export const typesReactDomVersion = '18.0.11';
 export const typesReactIsVersion = '17.0.3';