feat(rspack): move logic for withNx to applyBaseConfig and bring in l…

…ine with webpack (#28825)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
`withNx` from `@nx/rspack` is not reflective of what `@nx/webpack` does.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Bring `withNx` in line with `@nx/webpack`

## Notes

e2e/react/src/react.test.ts

@@ -86,13 +86,15 @@ describe('React Applications', () => {
       `
       );
 
-      runCLI(`build ${appName}`);
+      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`);
+        const e2eResults = runCLI(`e2e ${appName}-e2e -- --project=chromium`, {
+          verbose: true,
+        });
         expect(e2eResults).toContain('Successfully ran target e2e for project');
         expect(await killPorts()).toBeTruthy();
       }

e2e/rspack/tests/rspack.spec.ts

@@ -139,11 +139,11 @@ describe('rspack e2e', () => {
     result = runCLI(`build ${app3}`);
     expect(result).toContain('Successfully ran target build');
     // Make sure expected files are present.
-    expect(listFiles(`dist/${app3}`)).toHaveLength(2);
+    expect(listFiles(`dist/${app3}`)).toHaveLength(3);
 
     result = runCLI(`build ${app3} --generatePackageJson=true`);
     expect(result).toContain('Successfully ran target build');
     // Make sure expected files are present.
-    expect(listFiles(`dist/${app3}`)).toHaveLength(4);
+    expect(listFiles(`dist/${app3}`)).toHaveLength(5);
   }, 200_000);
 });

packages/rspack/package.json

@@ -32,23 +32,25 @@
     "@rspack/dev-server": "^1.0.4",
     "@rspack/plugin-react-refresh": "^1.0.0",
     "autoprefixer": "^10.4.9",
+    "browserslist": "^4.21.4",
     "chalk": "~4.1.0",
     "css-loader": "^6.4.0",
     "enquirer": "~2.3.6",
     "express": "^4.19.2",
+    "fork-ts-checker-webpack-plugin": "7.2.13",
     "http-proxy-middleware": "^3.0.3",
     "less-loader": "11.1.0",
     "license-webpack-plugin": "^4.0.2",
     "loader-utils": "^2.0.3",
     "sass": "^1.42.1",
     "sass-loader": "^12.2.0",
+    "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "postcss-import": "~14.1.0",
     "postcss-loader": "^8.1.1",
     "postcss": "^8.4.38",
-    "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
-    "webpack-subresource-integrity": "^5.1.0"
+    "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
     "@module-federation/enhanced": "~0.6.0",

packages/rspack/src/executors/dev-server/dev-server.impl.ts

@@ -11,6 +11,7 @@ import { createCompiler, isMultiCompiler } from '../../utils/create-compiler';
 import { isMode } from '../../utils/mode-utils';
 import { getDevServerOptions } from './lib/get-dev-server-config';
 import { DevServerExecutorSchema } from './schema';
+import { normalizeOptions } from '../rspack/lib/normalize-options';
 
 type DevServer = Configuration['devServer'];
 export default async function* runExecutor(
@@ -30,14 +31,28 @@ export default async function* runExecutor(
 
   const buildOptions = readTargetOptions(buildTarget, context);
 
+  process.env.NX_BUILD_LIBS_FROM_SOURCE = `${buildOptions.buildLibsFromSource}`;
+  process.env.NX_BUILD_TARGET = options.buildTarget;
+
+  const metadata = context.projectsConfigurations.projects[context.projectName];
+  const sourceRoot = metadata.sourceRoot;
+  const normalizedBuildOptions = normalizeOptions(
+    buildOptions,
+    context.root,
+    metadata.root,
+    sourceRoot
+  );
   let devServerConfig: DevServer = getDevServerOptions(
     context.root,
     options,
-    buildOptions
+    normalizedBuildOptions
   );
-
   const compiler = await createCompiler(
-    { ...buildOptions, devServer: devServerConfig, mode: options.mode },
+    {
+      ...normalizedBuildOptions,
+      devServer: devServerConfig,
+      mode: options.mode,
+    },
     context
   );
 

packages/rspack/src/executors/dev-server/lib/get-dev-server-config.ts

@@ -26,7 +26,7 @@ export function getDevServerOptions(
 
   const config: RspackDevServerConfiguration = {
     host: serveOptions.host,
-    port: serveOptions.port,
+    port: serveOptions.port ?? 4200,
     headers: { 'Access-Control-Allow-Origin': '*' },
     historyApiFallback: {
       index:

packages/rspack/src/executors/rspack/lib/normalize-options.ts

@@ -0,0 +1,56 @@
+import { resolve } from 'path';
+
+import {
+  normalizeAssets,
+  normalizeFileReplacements,
+} from '../../../plugins/utils/plugins/normalize-options';
+import type {
+  RspackExecutorSchema,
+  NormalizedRspackExecutorSchema,
+} from '../schema';
+
+export function normalizeOptions(
+  options: RspackExecutorSchema,
+  root: string,
+  projectRoot: string,
+  sourceRoot: string
+): NormalizedRspackExecutorSchema {
+  const normalizedOptions = {
+    ...options,
+    root,
+    projectRoot,
+    sourceRoot,
+    target: options.target ?? 'web',
+    outputFileName: options.outputFileName ?? 'main.js',
+    rspackConfig: normalizePluginPath(options.rspackConfig, root),
+    fileReplacements: normalizeFileReplacements(root, options.fileReplacements),
+    optimization:
+      typeof options.optimization !== 'object'
+        ? {
+            scripts: options.optimization,
+            styles: options.optimization,
+          }
+        : options.optimization,
+  };
+  if (options.assets) {
+    normalizedOptions.assets = normalizeAssets(
+      options.assets,
+      root,
+      sourceRoot,
+      projectRoot,
+      false // executor assets are relative to workspace root for consistency
+    );
+  }
+  return normalizedOptions as NormalizedRspackExecutorSchema;
+}
+
+export function normalizePluginPath(pluginPath: void | string, root: string) {
+  if (!pluginPath) {
+    return '';
+  }
+  try {
+    return require.resolve(pluginPath);
+  } catch {
+    return resolve(root, pluginPath);
+  }
+}

packages/rspack/src/executors/rspack/rspack.impl.ts

@@ -7,6 +7,7 @@ import * as path from 'path';
 import { createCompiler, isMultiCompiler } from '../../utils/create-compiler';
 import { isMode } from '../../utils/mode-utils';
 import { RspackExecutorSchema } from './schema';
+import { normalizeOptions } from './lib/normalize-options';
 
 export default async function* runExecutor(
   options: RspackExecutorSchema,
@@ -28,8 +29,16 @@ export default async function* runExecutor(
     force: true,
     recursive: true,
   });
+  const metadata = context.projectsConfigurations.projects[context.projectName];
+  const sourceRoot = metadata.sourceRoot;
+  const normalizedOptions = normalizeOptions(
+    options,
+    context.root,
+    metadata.root,
+    sourceRoot
+  );
 
-  const compiler = await createCompiler(options, context);
+  const compiler = await createCompiler(normalizedOptions, context);
 
   const iterable = createAsyncIterable<{
     success: boolean;
@@ -58,7 +67,11 @@ export default async function* runExecutor(
           }
           next({
             success: !stats.hasErrors(),
-            outfile: path.resolve(context.root, options.outputPath, 'main.js'),
+            outfile: path.resolve(
+              context.root,
+              normalizedOptions.outputPath,
+              'main.js'
+            ),
           });
         }
       );
@@ -90,7 +103,11 @@ export default async function* runExecutor(
           }
           next({
             success: !stats.hasErrors(),
-            outfile: path.resolve(context.root, options.outputPath, 'main.js'),
+            outfile: path.resolve(
+              context.root,
+              normalizedOptions.outputPath,
+              'main.js'
+            ),
           });
           done();
         });