fix(module-federation): nested projects should be ordered first when reading from tsconfig paths #20284 (#23212)

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

## Current Behavior
<!-- This is the behavior we have today -->
When using nested projects (note: not secondary entry points), the
`shareWorkspaceLibraries` needs to order the nested projects first for
webpack to resolve the import path aliases correctly.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Ensure nested projects are ordered first when reading tsconfig path
aliases

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

Fixes #20284

Author: Coly010

packages/webpack/src/utils/module-federation/share.spec.ts

@@ -58,6 +58,30 @@ describe('MF Share Utils', () => {
       });
     });
 
+    it('should order nested projects first', () => {
+      // ARRANGE
+      jest.spyOn(fs, 'existsSync').mockReturnValue(true);
+      jest.spyOn(tsUtils, 'readTsPathMappings').mockReturnValue({
+        '@myorg/shared': ['/libs/shared/src/index.ts'],
+        '@myorg/shared/components': ['/libs/shared/components/src/index.ts'],
+      });
+
+      // ACT
+      const sharedLibraries = shareWorkspaceLibraries([
+        { name: 'shared', root: 'libs/shared', importKey: '@myorg/shared' },
+        {
+          name: 'shared-components',
+          root: 'libs/shared/components',
+          importKey: '@myorg/shared/components',
+        },
+      ]);
+
+      // ASSERT
+      expect(Object.keys(sharedLibraries.getAliases())[0]).toEqual(
+        '@myorg/shared/components'
+      );
+    });
+
     it('should handle path mappings with wildcards correctly in non-buildable libraries', () => {
       // ARRANGE
       jest.spyOn(fs, 'existsSync').mockImplementation((file: string) => true);

packages/webpack/src/utils/module-federation/share.ts

@@ -41,8 +41,18 @@ export function shareWorkspaceLibraries(
     return getEmptySharedLibrariesConfig();
   }
 
+  // Nested projects must come first, sort them as such
+  const sortedTsConfigPathAliases = {};
+  Object.keys(tsconfigPathAliases)
+    .sort((a, b) => {
+      return b.split('/').length - a.split('/').length;
+    })
+    .forEach(
+      (key) => (sortedTsConfigPathAliases[key] = tsconfigPathAliases[key])
+    );
+
   const pathMappings: { name: string; path: string }[] = [];
-  for (const [key, paths] of Object.entries(tsconfigPathAliases)) {
+  for (const [key, paths] of Object.entries(sortedTsConfigPathAliases)) {
     const library = workspaceLibs.find((lib) => lib.importKey === key);
     if (!library) {
       continue;
@@ -52,7 +62,7 @@ export function shareWorkspaceLibraries(
     // It will do nothing for React Projects
     collectWorkspaceLibrarySecondaryEntryPoints(
       library,
-      tsconfigPathAliases
+      sortedTsConfigPathAliases
     ).forEach(({ name, path }) =>
       pathMappings.push({
         name,