feat: React Query singleton for 3000-home and 3001-shop

.changeset/fix-alias-aware-consume-plugin.md

@@ -0,0 +1,19 @@
+---
+'@module-federation/enhanced': patch
+'@module-federation/nextjs-mf': patch
+---
+
+fix(enhanced): ConsumeSharedPlugin alias-aware and virtual resource handling
+
+- Skip `data:` (virtual) resources in `afterResolve` and `createModule` so webpack's scheme resolver handles them (fixes container virtual-entry compile failure)
+- Broaden alias-aware matching in `afterResolve` to include deep-path shares that start with the resolved package name (e.g. `next/dist/compiled/react`), ensuring aliased modules are consumed from federation when configured
+- Avoid converting explicit relative/absolute requests into consumes to preserve local nested resolution (fixes deep module sharing version selection)
+- Keep prefix and node_modules suffix matching intact; no behavior change there
+- **NEW**: When no candidates found for framework-compiled packages (e.g., resource under */dist/compiled/*), also check shares matching the original request's package name, enabling pages-dir React shares to work without explicit imports
+
+These changes restore expected behavior for:
+- Virtual entry compilation
+- Deep module sharing (distinct versions for nested paths)
+- Alias-based sharing (Next.js compiled React)
+- Pages-dir React shares resolving correctly via aliasConsumption
+

.github/workflows/e2e-next-dev.yml

@@ -48,17 +48,22 @@ jobs:
       - name: E2E Test for Next.js Dev - Home
         if: steps.check-ci.outcome == 'success'
         run: |
-          killall node
+          lsof -ti tcp:3000,3001,3002 | xargs -r kill || true
           npx nx run 3000-home:test:e2e
 
       - name: E2E Test for Next.js Dev - Shop
         if: steps.check-ci.outcome == 'success'
         run: |
-          killall node
+          lsof -ti tcp:3000,3001,3002 | xargs -r kill || true
           npx nx run 3001-shop:test:e2e
 
       - name: E2E Test for Next.js Dev - Checkout
         if: steps.check-ci.outcome == 'success'
         run: |
-          killall node
+          lsof -ti tcp:3000,3001,3002 | xargs -r kill || true
           npx nx run 3002-checkout:test:e2e
+
+      - name: Teardown (always)
+        if: always()
+        run: |
+          lsof -ti tcp:3000,3001,3002 | xargs -r kill || true

.github/workflows/e2e-next-prod.yml

@@ -47,10 +47,9 @@ jobs:
         if: steps.check-ci.outcome == 'success'
         run: |
           pnpm run --filter @module-federation/3002-checkout --filter @module-federation/3000-home --filter @module-federation/3001-shop build &&
-          pnpm run app:next:prod &
-          sleep 4 &&
-          npx wait-on tcp:3001 &&
-          npx wait-on tcp:3002 &&
-          npx wait-on tcp:3000 &&
-          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
-          npx kill-port 3000,3001,3002
+          npx nx run-many --target=test:e2e --configuration=production --projects=3000-home,3001-shop,3002-checkout --parallel=1
+
+      - name: Teardown (always)
+        if: always()
+        run: |
+          npx kill-port 3000,3001,3002 || true

.gitignore

@@ -55,7 +55,6 @@ apps/**/dist
 **/cypress/downloads
 
 # test cases
-!packages/enhanced/test/configCases/**/**/node_modules
 packages/enhanced/test/js
 .ignored
 **/.mf
@@ -77,6 +76,8 @@ packages/enhanced/test/js
 # Federation
 **/.federation
 *.ts.timestamp*
+*.tsbuildinfo
+**/tsconfig.tsbuildinfo
 
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
@@ -90,4 +91,12 @@ ssg
 .claude
 # Native binary files
 *.node
+__mocks__/
+
+# test mock modules
+!packages/enhanced/test/configCases/**/**/node_modules
+!packages/enhanced/test/configCases/sharing/share-with-aliases/node_modules/next/dist
+!packages/enhanced/test/configCases/sharing/share-with-aliases-provide-only/node_modules/next/dist
 
+!packages/enhanced/test/configCases/**/node_modules/**/dist
+!packages/enhanced/test/configCases/**/node_modules/**/dist/**

AGENTS.md

@@ -0,0 +1,23 @@
+# AGENTS.md - Module Federation Core Repository Guidelines
+
+## Build/Test Commands
+```bash
+pnpm build              # Build all packages (tag:type:pkg)
+pnpm test               # Run all tests via nx
+pnpm lint               # Lint all packages
+pnpm lint-fix           # Fix linting issues
+pnpm nx run <pkg>:test  # Test specific package
+npx jest path/to/test.ts --no-coverage  # Run single test file
+```
+
+## Code Style
+- **Imports**: External → SDK/core → Local (grouped with blank lines)
+- **Type imports**: `import type { ... }` explicitly marked
+- **Naming**: camelCase functions, PascalCase classes, SCREAMING_SNAKE constants
+- **Files**: kebab-case or PascalCase for class files
+- **Errors**: Use `@module-federation/error-codes`, minimal try-catch
+- **Comments**: Minimal, use `//` inline, `/** */` for deprecation
+- **Async**: Named async functions for major ops, arrow functions in callbacks
+- **Exports**: Named exports preferred, barrel exports in index files
+- **Package manager**: ALWAYS use pnpm, never npm
+- **Parallelization**: Break tasks into 3-10 parallel subtasks minimum

apps/3000-home/cypress.config.ts

@@ -1,13 +1,38 @@
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 import { defineConfig } from 'cypress';
 
+const PORTS_TO_CLEAN = [3000, 3001, 3002] as const;
+
+async function killPorts(ports: readonly number[]) {
+  try {
+    const mod = await import('kill-port');
+    const killPort: (port: number) => Promise<unknown> =
+      (mod as any).default ?? (mod as any);
+    for (const p of ports) {
+      try {
+        await killPort(p);
+      } catch {
+        // ignore if port is not in use
+      }
+    }
+  } catch {
+    // best-effort cleanup; do not fail the run if kill-port is unavailable
+  }
+}
+
 export default defineConfig({
   projectId: 'sa6wfn',
   e2e: {
     ...nxE2EPreset(__filename, { cypressDir: 'cypress' }),
     // Please ensure you use `cy.origin()` when navigating between domains and remove this option.
     // See https://docs.cypress.io/app/references/migration-guide#Changes-to-cyorigin
     injectDocumentDomain: true,
+    setupNodeEvents(on, config) {
+      on('after:run', async () => {
+        await killPorts(PORTS_TO_CLEAN);
+      });
+      return config;
+    },
   },
   defaultCommandTimeout: 20000,
   retries: {

apps/3000-home/next.config.js

@@ -1,15 +1,9 @@
-const { withNx } = require('@nx/next/plugins/with-nx');
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
 
 /**
- * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ * @type {import('next').NextConfig}
  **/
 const nextConfig = {
-  nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
   webpack(config, options) {
     const { isServer } = options;
     config.watchOptions = {
@@ -46,8 +40,13 @@ const nextConfig = {
             requiredVersion: '5.19.1',
             version: '5.19.1',
           },
-          '@ant-design/': {
+          '@ant-design/cssinjs': { singleton: true, requiredVersion: false },
+          // '@ant-design/': { singleton: true },
+          // Only list real TanStack packages used by this app
+          '@tanstack/react-query': { singleton: true, requiredVersion: false },
+          '@tanstack/react-query-devtools': {
             singleton: true,
+            requiredVersion: false,
           },
         },
         extraOptions: {
@@ -68,4 +67,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withNx(nextConfig);
+module.exports = nextConfig;

apps/3000-home/package.json

@@ -3,12 +3,14 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
     "@ant-design/cssinjs": "^1.21.0",
     "antd": "5.19.1",
     "lodash": "4.17.21",
     "next": "15.3.3",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@module-federation/nextjs-mf": "workspace:*",

apps/3000-home/pages/_app.tsx

@@ -4,13 +4,34 @@ import { init } from '@module-federation/runtime';
 console.log('logging init', typeof init);
 import App from 'next/app';
 import { Layout, version, ConfigProvider } from 'antd';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { StyleProvider } from '@ant-design/cssinjs';
 
 import Router, { useRouter } from 'next/router';
 const SharedNav = React.lazy(() => import('../components/SharedNav'));
 import HostAppMenu from '../components/menu';
 function MyApp(props) {
   const { Component, pageProps } = props;
+  // Ensure a single QueryClient instance in the browser; create per-request on SSR
+  const [queryClient] = React.useState(() => {
+    if (typeof window === 'undefined') {
+      return new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 30_000, refetchOnWindowFocus: false },
+        },
+      });
+    }
+    const w = window as any;
+    w.__mfQueryClient =
+      w.__mfQueryClient ||
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 30_000, refetchOnWindowFocus: false },
+        },
+      });
+    return w.__mfQueryClient as QueryClient;
+  });
   const { asPath } = useRouter();
   const [MenuComponent, setMenuComponent] = useState(() => HostAppMenu);
   const handleRouteChange = async (url) => {
@@ -42,30 +63,35 @@ function MyApp(props) {
   return (
     <StyleProvider layer>
       <ConfigProvider theme={{ hashed: false }}>
-        <Layout style={{ minHeight: '100vh' }} prefixCls={'dd'}>
-          <React.Suspense>
-            <SharedNav />
-          </React.Suspense>
-          <Layout>
-            <Layout.Sider width={200}>
-              <MenuComponent />
-            </Layout.Sider>
+        <QueryClientProvider client={queryClient}>
+          <Layout style={{ minHeight: '100vh' }} prefixCls={'dd'}>
+            <React.Suspense>
+              <SharedNav />
+            </React.Suspense>
             <Layout>
-              <Layout.Content style={{ background: '#fff', padding: 20 }}>
-                <Component {...pageProps} />
-              </Layout.Content>
-              <Layout.Footer
-                style={{
-                  background: '#fff',
-                  color: '#999',
-                  textAlign: 'center',
-                }}
-              >
-                antd@{version}
-              </Layout.Footer>
+              <Layout.Sider width={200}>
+                <MenuComponent />
+              </Layout.Sider>
+              <Layout>
+                <Layout.Content style={{ background: '#fff', padding: 20 }}>
+                  <Component {...pageProps} />
+                </Layout.Content>
+                <Layout.Footer
+                  style={{
+                    background: '#fff',
+                    color: '#999',
+                    textAlign: 'center',
+                  }}
+                >
+                  antd@{version}
+                </Layout.Footer>
+              </Layout>
             </Layout>
+            {process.env.NODE_ENV !== 'production' ? (
+              <ReactQueryDevtools initialIsOpen={false} />
+            ) : null}
           </Layout>
-        </Layout>
+        </QueryClientProvider>
       </ConfigProvider>
     </StyleProvider>
   );

apps/3000-home/project.json

@@ -6,55 +6,24 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@nx/next:build",
-      "defaultConfiguration": "production",
+      "executor": "nx:run-commands",
       "options": {
-        "outputPath": "apps/3000-home"
-      },
-      "configurations": {
-        "development": {
-          "outputPath": "apps/3000-home"
-        },
-        "production": {}
-      },
-      "dependsOn": [
-        {
-          "target": "build",
-          "dependencies": true
-        }
-      ]
+        "command": "next build",
+        "cwd": "apps/3000-home"
+      }
     },
     "serve": {
-      "executor": "@nx/next:server",
+      "executor": "nx:run-commands",
       "defaultConfiguration": "development",
       "options": {
-        "buildTarget": "3000-home:build",
-        "dev": true,
-        "port": 3000
+        "command": "next dev -p 3000",
+        "cwd": "apps/3000-home"
       },
       "configurations": {
-        "development": {
-          "buildTarget": "3000-home:build:development",
-          "dev": true,
-          "port": 3000
-        },
         "production": {
-          "buildTarget": "3000-home:build:production",
-          "dev": false,
-          "port": 3000
+          "command": "next start -p 3000",
+          "cwd": "apps/3000-home"
         }
-      },
-      "dependsOn": [
-        {
-          "target": "build",
-          "dependencies": true
-        }
-      ]
-    },
-    "export": {
-      "executor": "@nx/next:export",
-      "options": {
-        "buildTarget": "3000-home:build:production"
       }
     },
     "lint": {