fix(react): use babel-loader when using styled-jsx with rspack (#16443)

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);
   }

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';