fix(nextjs): add extension alias support for handling ESM libs

closes: #30714

Author: ndcunningham

e2e/next/next-ts-solutions.test.ts

@@ -0,0 +1,63 @@
+import {
+  cleanupProject,
+  getPackageManagerCommand,
+  newProject,
+  readFile,
+  runCLI,
+  runCommand,
+  uniq,
+  updateFile,
+  updateJson,
+} from '@nx/e2e/utils';
+describe('Next TS Solutions', () => {
+  let proj: string;
+
+  beforeAll(() => {
+    proj = newProject({
+      packages: ['@nx/next'],
+      preset: 'ts',
+    });
+  });
+  afterAll(() => cleanupProject());
+
+  it('should support importing a esm library', async () => {
+    const appName = uniq('app');
+    const libName = uniq('lib');
+
+    runCLI(
+      `generate @nx/next:app ${appName} --no-interactive --style=css --linter=none --unitTestRunner=none --e2eTestRunner=none`
+    );
+
+    runCLI(
+      `generate @nx/js:lib packages/${libName} --bundler=vite --no-interactive --unit-test-runner=none --skipFormat --linter=eslint`
+    );
+
+    updateFile(
+      `${appName}/src/app/page.tsx`,
+      `
+      import {${libName}} from '@${proj}/${libName}';
+                ${readFile(`${appName}/src/app/page.tsx`)}
+          console.log(${libName}());
+        `
+    );
+    runCLI('sync');
+
+    // Add library to package.json to make sure it is linked (not needed for npm package manager)
+    updateJson(`${appName}/package.json`, (json) => {
+      return {
+        ...json,
+        devDependencies: {
+          ...(json.devDependencies || {}),
+          [`@${proj}/${libName}`]: 'workspace:*',
+        },
+      };
+    });
+
+    runCommand(`cd ${appName} && ${getPackageManagerCommand().install}`);
+
+    const output = runCLI(`build ${appName}`);
+    expect(output).toContain(
+      `Successfully ran target build for project @${proj}/${appName}`
+    );
+  });
+});

e2e/next/src/next.test.ts

@@ -10,7 +10,6 @@ import {
   uniq,
   updateFile,
 } from '@nx/e2e/utils';
-import * as http from 'http';
 import { checkApp } from './utils';
 
 describe('Next.js Applications', () => {
@@ -240,20 +239,3 @@ describe('Next.js Applications', () => {
     expect(postBuildPagesContent).toMatchSnapshot();
   });
 });
-
-function getData(port, path = ''): Promise<any> {
-  return new Promise((resolve, reject) => {
-    http
-      .get(`http://localhost:${port}${path}`, (res) => {
-        expect(res.statusCode).toEqual(200);
-        let data = '';
-        res.on('data', (chunk) => {
-          data += chunk;
-        });
-        res.once('end', () => {
-          resolve(data);
-        });
-      })
-      .on('error', (err) => reject(err));
-  });
-}

packages/next/plugins/with-nx.ts

@@ -261,6 +261,15 @@ export function getNextConfig(
     },
     ...validNextConfig,
     webpack: (config, options) => {
+      /**
+       * To support ESM library export, we need to ensure the extensionAlias contains both `.js` and `.ts` extensions.
+       * This is because Webpack uses the `extensionAlias` to resolve the correct file extension when importing modules.
+       */
+      config.resolve.extensionAlias = {
+        ...(config.resolve.extensionAlias || {}),
+        '.js': ['.ts', '.js'],
+        '.mjs': ['.mts', '.mjs'],
+      };
       /*
        * Update babel to support our monorepo setup.
        * The 'upward' mode allows the root babel.config.json and per-project .babelrc files to be picked up.