fix(webpack): Add useTsconfigPaths to app-webpack-plugin (nrwl#29291)

<!-- 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 -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

packages/next/plugins/component-testing.ts

@@ -127,6 +127,7 @@ Able to find CT project, ${!!ctProjectConfig}.`);
     projectRoot: ctProjectConfig.root,
     sourceRoot: ctProjectConfig.sourceRoot,
     main: '',
+    useTsconfigPaths: undefined,
     fileReplacements: buildFileReplacements,
     assets: buildAssets,
     outputPath: buildOuputPath,

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

@@ -8,6 +8,7 @@ import type {
   RspackExecutorSchema,
   NormalizedRspackExecutorSchema,
 } from '../schema';
+import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 export function normalizeOptions(
   options: RspackExecutorSchema,
@@ -17,6 +18,7 @@ export function normalizeOptions(
 ): NormalizedRspackExecutorSchema {
   const normalizedOptions = {
     ...options,
+    useTsconfigPaths: !isUsingTsSolutionSetup(),
     root,
     projectRoot,
     sourceRoot,

packages/rspack/src/executors/rspack/schema.d.ts

@@ -69,4 +69,5 @@ export interface NormalizedRspackExecutorSchema extends RspackExecutorSchema {
   root: string;
   projectRoot: string;
   sourceRoot: string;
+  useTsconfigPaths: boolean;
 }

packages/rspack/src/plugins/utils/apply-base-config.ts

@@ -217,6 +217,8 @@ function applyNxDependentConfig(
   const tsConfig = options.tsConfig ?? getRootTsConfigPath();
   const plugins: RspackPluginInstance[] = [];
 
+  const isUsingTsSolution = isUsingTsSolutionSetup();
+
   const executorContext: Partial<ExecutorContext> = {
     projectName: options.projectName,
     targetName: options.targetName,
@@ -225,10 +227,14 @@ function applyNxDependentConfig(
     root: options.root,
   };
 
-  plugins.push(new NxTsconfigPathsRspackPlugin({ ...options, tsConfig }));
+  options.useTsconfigPaths ??= !isUsingTsSolution;
+  // If the project is using ts solutions setup, the paths are not in tsconfig and we should not use the plugin's paths.
+  if (options.useTsconfigPaths) {
+    plugins.push(new NxTsconfigPathsRspackPlugin({ ...options, tsConfig }));
+  }
 
   // New TS Solution already has a typecheck target
-  if (!options?.skipTypeChecking && !isUsingTsSolutionSetup()) {
+  if (!options?.skipTypeChecking && !isUsingTsSolution) {
     const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
     plugins.push(
       new ForkTsCheckerWebpackPlugin({

packages/rspack/src/plugins/utils/models.ts

@@ -207,6 +207,10 @@ export interface NxAppRspackPluginOptions {
    * List of TypeScript Compiler Transformers Plugins.
    */
   transformers?: TransformerEntry[];
+  /**
+   * Use tsconfig-paths-webpack-plugin to resolve modules using paths in the tsconfig file.
+   */
+  useTsconfigPaths?: boolean;
   /**
    * Generate a separate vendor chunk for 3rd party packages.
    */

packages/rspack/src/utils/config.ts

@@ -99,6 +99,7 @@ function ensureNxRspackExecutionContext(ctx: NxRspackExecutionContext): void {
     outputFileName: undefined,
     outputPath: undefined,
     rspackConfig: undefined,
+    useTsconfigPaths: undefined,
   };
   ctx.context ??= {
     projectName,

packages/rspack/src/utils/read-rspack-options.ts

@@ -31,6 +31,7 @@ export async function readRspackOptions(
           tsConfig: '',
           outputPath: '',
           rspackConfig: '',
+          useTsconfigPaths: undefined,
         },
         context: {
           root: workspaceRoot,

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

@@ -8,6 +8,7 @@ import type {
   NormalizedWebpackExecutorOptions,
   WebpackExecutorOptions,
 } from '../schema';
+import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 export function normalizeOptions(
   options: WebpackExecutorOptions,
@@ -17,6 +18,7 @@ export function normalizeOptions(
 ): NormalizedWebpackExecutorOptions {
   const normalizedOptions = {
     ...options,
+    useTsconfigPaths: !isUsingTsSolutionSetup(),
     root,
     projectRoot,
     sourceRoot,

packages/webpack/src/executors/webpack/schema.d.ts

@@ -95,4 +95,5 @@ export interface NormalizedWebpackExecutorOptions
   root: string;
   projectRoot: string;
   sourceRoot: string;
+  useTsconfigPaths: boolean;
 }

packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-base-config.ts

@@ -231,10 +231,16 @@ function applyNxDependentConfig(
     root: options.root,
   };
 
-  plugins.push(new NxTsconfigPathsWebpackPlugin({ ...options, tsConfig }));
+  const isUsingTsSolution = isUsingTsSolutionSetup();
+  options.useTsconfigPaths ??= !isUsingTsSolution;
+
+  // If the project is using ts solutions setup, the paths are not in tsconfig and we should not use the plugin's paths.
+  if (options.useTsconfigPaths) {
+    plugins.push(new NxTsconfigPathsWebpackPlugin({ ...options, tsConfig }));
+  }
 
   // New TS Solution already has a typecheck target
-  if (!options?.skipTypeChecking && !isUsingTsSolutionSetup()) {
+  if (!options?.skipTypeChecking && !isUsingTsSolution) {
     const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
     plugins.push(
       new ForkTsCheckerWebpackPlugin({

packages/webpack/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options.ts

@@ -211,6 +211,10 @@ export interface NxAppWebpackPluginOptions {
    * List of TypeScript Compiler Transformers Plugins.
    */
   transformers?: TransformerEntry[];
+  /**
+   * Use tsconfig-paths-webpack-plugin to resolve modules using paths in the tsconfig file.
+   */
+  useTsconfigPaths?: boolean;
   /**
    * Generate a separate vendor chunk for 3rd party packages.
    */

packages/webpack/src/utils/config.ts

@@ -99,6 +99,7 @@ function ensureNxWebpackExecutionContext(ctx: NxWebpackExecutionContext): void {
     outputPath: undefined,
     tsConfig: undefined,
     outputFileName: undefined,
+    useTsconfigPaths: undefined,
   };
   ctx.context ??= {
     projectName,

packages/webpack/src/utils/webpack/read-webpack-options.ts

@@ -28,6 +28,7 @@ export async function readWebpackOptions(
           outputFileName: undefined,
           outputPath: undefined,
           assets: undefined,
+          useTsconfigPaths: undefined,
         },
         context: {
           root: workspaceRoot,