feat(rspack): non-inferred targets should work OOTB (#29733)

e2e/react/src/react-rspack.test.ts

@@ -0,0 +1,60 @@
+import {
+  checkFilesExist,
+  cleanupProject,
+  killPorts,
+  newProject,
+  readFile,
+  runCLI,
+  runE2ETests,
+  uniq,
+  updateFile,
+} from '@nx/e2e/utils';
+
+describe('Build React applications and libraries with Rspack', () => {
+  let proj: string;
+  beforeAll(() => {
+    proj = newProject({
+      packages: ['@nx/react'],
+    });
+  });
+
+  afterAll(() => {
+    cleanupProject();
+  });
+
+  it('should be able to use Rspack to build and test apps', async () => {
+    const appName = uniq('app');
+    const libName = uniq('lib');
+
+    runCLI(
+      `generate @nx/react:app ${appName} --bundler=rspack --unit-test-runner=vitest --no-interactive --skipFormat --linter=eslint`
+    );
+    runCLI(
+      `generate @nx/react:lib ${libName} --bundler=none --no-interactive --unit-test-runner=vitest --skipFormat --linter=eslint`
+    );
+
+    // Library generated with Vite
+    checkFilesExist(`${libName}/vite.config.ts`);
+
+    const mainPath = `${appName}/src/main.tsx`;
+    updateFile(
+      mainPath,
+      `
+          import '@${proj}/${libName}';
+          ${readFile(mainPath)}
+        `
+    );
+
+    runCLI(`build ${appName}`, { verbose: true });
+
+    checkFilesExist(`dist/${appName}/index.html`);
+
+    if (runE2ETests()) {
+      const e2eResults = runCLI(`e2e ${appName}-e2e`, {
+        verbose: true,
+      });
+      expect(e2eResults).toContain('Successfully ran target e2e for project');
+      expect(await killPorts()).toBeTruthy();
+    }
+  }, 250_000);
+});

e2e/react/src/react.test.ts

@@ -62,43 +62,6 @@ describe('React Applications', () => {
       }
     }, 250_000);
 
-    it('should be able to use Rspack to build and test apps', async () => {
-      const appName = uniq('app');
-      const libName = uniq('lib');
-
-      runCLI(
-        `generate @nx/react:app ${appName} --bundler=rspack --unit-test-runner=vitest --no-interactive --skipFormat --linter=eslint`
-      );
-      runCLI(
-        `generate @nx/react:lib ${libName} --bundler=none --no-interactive --unit-test-runner=vitest --skipFormat --linter=eslint`
-      );
-
-      // Library generated with Vite
-      checkFilesExist(`${libName}/vite.config.ts`);
-
-      const mainPath = `${appName}/src/main.tsx`;
-      updateFile(
-        mainPath,
-        `
-        import '@${proj}/${libName}';
-        ${readFile(mainPath)}
-      `
-      );
-
-      runCLI(`build ${appName}`, { verbose: true });
-
-      checkFilesExist(`dist/${appName}/index.html`);
-
-      if (runE2ETests()) {
-        // TODO(Colum): investigate why webkit is failing
-        const e2eResults = runCLI(`e2e ${appName}-e2e -- --project=chromium`, {
-          verbose: true,
-        });
-        expect(e2eResults).toContain('Successfully ran target e2e for project');
-        expect(await killPorts()).toBeTruthy();
-      }
-    }, 250_000);
-
     it('should be able to generate a react app + lib (with CSR and SSR)', async () => {
       const appName = uniq('app');
       const libName = uniq('lib');

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

@@ -254,7 +254,9 @@ function createConfig(
 
   const defaultConfig = generateDefaultConfig(project, buildOptions);
 
-  if (isWebFramework(options)) {
+  if (options.framework === 'react') {
+    return generateReactConfig(options);
+  } else if (isWebFramework(options)) {
     return generateWebConfig(tree, options, defaultConfig);
   } else if (options.framework === 'nest') {
     return generateNestConfig(tree, options, project, buildOptions);
@@ -338,6 +340,26 @@ module.exports = composePlugins(withNx(), withWeb(${
 `;
 }
 
+function generateReactConfig({
+  stylePreprocessorOptions,
+}: ConfigurationWithStylePreprocessorOptions) {
+  return `
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+module.exports = composePlugins(withNx(), withReact(${
+    stylePreprocessorOptions
+      ? `
+  {
+    stylePreprocessorOptions: ${JSON.stringify(stylePreprocessorOptions)},
+  }
+  `
+      : ''
+  }), (config) => {
+  return config;
+});
+    `;
+}
+
 function generateNestConfig(
   tree: Tree,
   options: ConfigurationSchema,