fix(nextjs): update workspace libs setup in weback config (#17795)

e2e/next/src/next-experimental.test.ts

@@ -0,0 +1,71 @@
+import {
+  cleanupProject,
+  newProject,
+  runCLI,
+  uniq,
+  updateFile,
+} from '@nx/e2e/utils';
+import { checkApp } from './utils';
+
+describe('Next.js Experimental Features', () => {
+  let proj: string;
+
+  beforeEach(() => {
+    proj = newProject();
+  });
+
+  afterEach(() => {
+    cleanupProject();
+  });
+
+  it('should be able to define server actions in workspace libs', async () => {
+    const appName = uniq('app');
+    const libName = uniq('lib');
+
+    runCLI(`generate @nx/next:app ${appName}`);
+    runCLI(`generate @nx/next:lib ${libName} --no-interactive`);
+
+    // Update the app to test two scenarios:
+    // 1. Workspace lib with server actions through 'use server' directive
+    // 2. Workspace with a client component through 'use client' directive
+    updateFile(
+      `libs/${libName}/src/lib/action.ts`,
+      `
+        'use server';
+        export async function addItem() {
+          console.log('adding item');
+        }
+      `
+    );
+    updateFile(
+      `libs/${libName}/src/lib/${libName}.tsx`,
+      `
+        'use client';
+        import { addItem } from './action';
+        export function TestComponent() {
+          return (
+            <form action={addItem}>
+              <button type="submit">Add</button>
+            </form>
+          );
+        };
+      `
+    );
+    updateFile(
+      `apps/${appName}/app/page.tsx`,
+      `
+        import { TestComponent } from '@proj/${libName}';
+        export default function Home() {
+          return  <TestComponent />;
+        }
+      `
+    );
+
+    await checkApp(appName, {
+      checkUnitTest: false,
+      checkLint: true,
+      checkE2E: false,
+      checkExport: false,
+    });
+  }, 300_000);
+});

packages/next/package.json

@@ -46,7 +46,6 @@
     "semver": "7.5.3",
     "ts-node": "10.9.1",
     "tsconfig-paths": "^4.1.2",
-    "tsconfig-paths-webpack-plugin": "4.0.0",
     "url-loader": "^4.1.1",
     "webpack-merge": "^5.8.0",
     "@nx/devkit": "file:../devkit",

packages/next/plugins/with-nx.ts

@@ -210,9 +210,7 @@ function withNx(
           workspaceRoot,
           projectDirectory,
           options.fileReplacements,
-          options.assets,
-          dependencies,
-          path.join(workspaceRoot, context.libsDir)
+          options.assets
         )(userWebpackConfig ? userWebpackConfig(a, b) : a, b);
 
       return nextConfig;

packages/next/src/utils/config.ts

@@ -1,13 +1,8 @@
 import type { NextConfig } from 'next';
-import { join, resolve } from 'path';
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+import { resolve } from 'path';
 import { Configuration, RuleSetRule } from 'webpack';
 import { FileReplacement } from './types';
 import { createCopyPlugin } from './create-copy-plugin';
-import {
-  createTmpTsConfig,
-  DependentBuildableProjectNode,
-} from '@nx/js/src/utils/buildable-libs-utils';
 
 export interface NextConfigFn {
   (phase: string, context?: any): Promise<NextConfig> | NextConfig;
@@ -25,9 +20,7 @@ export function createWebpackConfig(
   workspaceRoot: string,
   projectRoot: string,
   fileReplacements: FileReplacement[] = [],
-  assets: any = null,
-  dependencies: DependentBuildableProjectNode[] = [],
-  libsDir = ''
+  assets: any = null
 ): (a, b) => Configuration {
   return function webpackConfig(
     config: Configuration,
@@ -39,26 +32,6 @@ export function createWebpackConfig(
       isServer: boolean;
     }
   ): Configuration {
-    const mainFields = ['es2015', 'module', 'main'];
-    const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
-    let tsConfigPath = join(workspaceRoot, projectRoot, 'tsconfig.json');
-    if (dependencies.length > 0) {
-      tsConfigPath = createTmpTsConfig(
-        tsConfigPath,
-        workspaceRoot,
-        projectRoot,
-        dependencies
-      );
-    }
-
-    config.resolve.plugins = [
-      new TsconfigPathsPlugin({
-        configFile: tsConfigPath,
-        extensions,
-        mainFields,
-      }) as never, // TODO: Remove never type when 'tsconfig-paths-webpack-plugin' types fixed
-    ];
-
     fileReplacements
       .map((fileReplacement) => ({
         replace: resolve(workspaceRoot, fileReplacement.replace),
@@ -69,25 +42,6 @@ export function createWebpackConfig(
         return alias;
       }, config.resolve.alias);
 
-    // Apply any rules that work on ts files to the libsDir as well
-    const rulesToAdd = [];
-    for (const r of config.module.rules) {
-      if (typeof r === 'string') {
-        continue;
-      }
-      if (isTsRule(r)) {
-        rulesToAdd.push({ ...r, include: [libsDir] });
-      } else if (r.oneOf && r.oneOf.find(isTsRule)) {
-        rulesToAdd.push({
-          ...r,
-          oneOf: r.oneOf
-            .filter(isTsRule)
-            .map((subRule) => ({ ...subRule, include: [libsDir] })),
-        });
-      }
-    }
-    config.module.rules.push(...rulesToAdd);
-
     // Copy (shared) assets to `public` folder during client-side compilation
     if (!isServer && Array.isArray(assets) && assets.length > 0) {
       config.plugins.push(createCopyPlugin(assets, workspaceRoot, projectRoot));
@@ -96,14 +50,3 @@ export function createWebpackConfig(
     return config;
   };
 }
-
-function isTsRule(r: RuleSetRule): boolean {
-  if (typeof r === 'string') {
-    return false;
-  }
-  if (!(r.test instanceof RegExp)) {
-    return false;
-  }
-
-  return r.test.test('a.ts');
-}