fix(react): change application generation steps sequence

docs/generated/packages/rspack/generators/configuration.json

@@ -45,6 +45,11 @@
         "description": "Add a serve target to run a local rspack dev-server",
         "default": false
       },
+      "overwriteConfig": {
+        "type": "boolean",
+        "description": "Whether to overwrite the existing rspack.config.js file",
+        "default": true
+      },
       "style": {
         "type": "string",
         "description": "The style solution to use.",

packages/react/src/generators/application/application.ts

@@ -159,14 +159,6 @@ export async function applicationGeneratorInternal(
       );
       tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
     }
-  } else if (options.bundler === 'rspack') {
-    const { rspackInitGenerator } = ensurePackage('@nx/rspack', nxVersion);
-    const rspackInitTask = await rspackInitGenerator(host, {
-      ...options,
-      addPlugin: false,
-      skipFormat: true,
-    });
-    tasks.push(rspackInitTask);
   }
 
   if (!options.rootProject) {
@@ -230,6 +222,7 @@ export async function applicationGeneratorInternal(
       false
     );
   } else if (options.bundler === 'rspack') {
+    /* 'rspackInitGenerator' is being called inside 'configurationGenerator' */
     const { configurationGenerator } = ensurePackage('@nx/rspack', nxVersion);
     const rspackTask = await configurationGenerator(host, {
       project: options.projectName,
@@ -247,6 +240,7 @@ export async function applicationGeneratorInternal(
       target: 'web',
       newProject: true,
       framework: 'react',
+      overwriteConfig: false,
     });
     tasks.push(rspackTask);
   }
@@ -321,44 +315,24 @@ export async function applicationGeneratorInternal(
   tasks.push(routingTask);
   setDefaults(host, options);
 
-  if (options.bundler === 'rspack' && options.style === 'styled-jsx') {
-    logger.warn(
-      `${pc.bold('styled-jsx')} is not supported by ${pc.bold(
-        'Rspack'
-      )}. We've added ${pc.bold(
-        'babel-loader'
-      )} to your project, but using babel will slow down your build.`
-    );
-
-    tasks.push(
-      addDependenciesToPackageJson(
-        host,
-        {},
-        { 'babel-loader': babelLoaderVersion }
-      )
-    );
+  if (options.bundler === 'rspack') {
+    if (options.style === 'styled-jsx') {
+      logger.warn(
+        `${pc.bold('styled-jsx')} is not supported by ${pc.bold(
+          'Rspack'
+        )}. We've added ${pc.bold(
+          'babel-loader'
+        )} to your project, but using babel will slow down your build.`
+      );
 
-    host.write(
-      joinPathFragments(options.appProjectRoot, 'rspack.config.js'),
-      stripIndents`
-        const { composePlugins, withNx, withReact } = require('@nx/rspack');
-        module.exports = composePlugins(withNx(), withReact(), (config) => {
-          config.module.rules.push({
-            test: /\\.[jt]sx$/i,
-            use: [
-              {
-                loader: 'babel-loader',
-                options: {
-                  presets: ['@babel/preset-typescript'],
-                  plugins: ['styled-jsx/babel'],
-                },
-              },
-            ],
-          });
-          return config;
-        });
-        `
-    );
+      tasks.push(
+        addDependenciesToPackageJson(
+          host,
+          {},
+          { 'babel-loader': babelLoaderVersion }
+        )
+      );
+    }
   }
 
   updateTsconfigFiles(host, options.appProjectRoot, 'tsconfig.app.json', {

packages/react/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -47,6 +47,18 @@ module.exports = composePlugins(
   (config) => {
     // Update the rspack config as needed here.
     // e.g. `config.plugins.push(new MyPlugin())`
+    <%_ if (style === 'styled-jsx') { _%>config.module.rules.push({
+      test: /\.[jt]sx$/i,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-typescript'],
+            plugins: ['styled-jsx/babel'],
+          },
+        },
+      ],
+    });<%_ } _%>
     return config;
   }
 );

packages/rspack/src/generators/configuration/schema.d.ts

@@ -9,4 +9,5 @@ export interface ConfigurationSchema extends InitGeneratorSchema {
   newProject?: boolean;
   buildTarget?: string;
   serveTarget?: string;
+  overwriteConfig?: boolean;
 }

packages/rspack/src/generators/configuration/schema.json

@@ -45,6 +45,11 @@
       "description": "Add a serve target to run a local rspack dev-server",
       "default": false
     },
+    "overwriteConfig": {
+      "type": "boolean",
+      "description": "Whether to overwrite the existing rspack.config.js file",
+      "default": true
+    },
     "style": {
       "type": "string",
       "description": "The style solution to use.",

packages/rspack/src/utils/generator-utils.ts

@@ -239,6 +239,13 @@ export function writeRspackConfigFile(
 ) {
   const project = readProjectConfiguration(tree, options.project);
 
+  if (
+    tree.exists(joinPathFragments(project.root, 'rspack.config.js')) &&
+    options.overwriteConfig === false
+  ) {
+    return;
+  }
+
   tree.write(
     joinPathFragments(project.root, 'rspack.config.js'),
     createConfig(tree, { ...options, stylePreprocessorOptions })