module-federation
diff --git a/‎.github/workflows/on-pull-request.yml‎
Lines changed: 41 additions & 17 deletions b/‎.github/workflows/on-pull-request.yml‎
Lines changed: 41 additions & 17 deletions
diff --git a/‎.github/workflows/on-push.yml‎
Lines changed: 2 additions & 4 deletions b/‎.github/workflows/on-push.yml‎
Lines changed: 2 additions & 4 deletions
diff --git a/‎.npmrc‎
Lines changed: 4 additions & 0 deletions b/‎.npmrc‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎advanced-api/automatic-vendor-sharing/app1/package.json‎
Lines changed: 10 additions & 10 deletions b/‎advanced-api/automatic-vendor-sharing/app1/package.json‎
Lines changed: 10 additions & 10 deletions
diff --git a/‎advanced-api/automatic-vendor-sharing/app1/rspack.config.js‎
Lines changed: 6 additions & 0 deletions b/‎advanced-api/automatic-vendor-sharing/app1/rspack.config.js‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎advanced-api/automatic-vendor-sharing/app1/src/ErrorBoundary.js‎
Lines changed: 81 additions & 0 deletions b/‎advanced-api/automatic-vendor-sharing/app1/src/ErrorBoundary.js‎
Lines changed: 81 additions & 0 deletions
diff --git a/‎advanced-api/automatic-vendor-sharing/app1/src/index.js‎
Lines changed: 1 addition & 1 deletion b/‎advanced-api/automatic-vendor-sharing/app1/src/index.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎advanced-api/automatic-vendor-sharing/app1/webpack.config.js‎
Lines changed: 11 additions & 1 deletion b/‎advanced-api/automatic-vendor-sharing/app1/webpack.config.js‎
Lines changed: 11 additions & 1 deletion
diff --git a/‎advanced-api/automatic-vendor-sharing/app1/webpack.prod.config.js‎
Lines changed: 7 additions & 4 deletions b/‎advanced-api/automatic-vendor-sharing/app1/webpack.prod.config.js‎
Lines changed: 7 additions & 4 deletions
@@ -103,6 +103,17 @@ jobs:
           ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 0
 
+      - name: Free disk space
+        shell: bash
+        run: |
+          echo "Freeing disk space on runner..."
+          while IFS= read -r cmd; do
+            [ -z "$cmd" ] && continue
+            echo ">> $cmd"
+            bash -lc "$cmd" || true
+          done <<< "$FILES_TO_DELETE"
+          df -h
+
       - name: Get Playwright version
         id: playwright-version
         shell: bash
@@ -143,22 +154,21 @@ jobs:
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
-          restore-keys: |
-            playwright-${{ runner.os }}-
-            
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}-headless-shell
+
       - name: Set Playwright cache status
         run: echo "PLAYWRIGHT_CACHE_HIT=${{ steps.playwright-cache.outputs.cache-hit }}" >> $GITHUB_ENV
 
       - name: Install dependencies
         run: |
           echo "Installing all dependencies to populate cache..."
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install --frozen-lockfile --prefer-offline
-          
-      - name: Install Playwright browsers
+
+      - name: Install Playwright with deps
         run: |
-          # Populate the shared browser cache once per workflow run (no system deps here).
-          pnpm exec playwright install chromium
+          # Install both system deps and browser in setup-matrix.
+          # The browser cache will be shared with e2e jobs.
+          pnpm exec playwright install --with-deps chromium chromium-headless-shell
 
       - name: Create matrix
         id: set-matrix
@@ -186,6 +196,17 @@ jobs:
           ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 1
 
+      - name: Free disk space
+        shell: bash
+        run: |
+          echo "Freeing disk space on runner..."
+          while IFS= read -r cmd; do
+            [ -z "$cmd" ] && continue
+            echo ">> $cmd"
+            bash -lc "$cmd" || true
+          done <<< "$FILES_TO_DELETE"
+          df -h
+
       - name: Get Playwright version
         id: playwright-version
         shell: bash
@@ -228,9 +249,7 @@ jobs:
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
-          restore-keys: |
-            playwright-${{ runner.os }}-
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}-headless-shell
           fail-on-cache-miss: false
 
       - name: Install dependencies
@@ -242,26 +261,31 @@ jobs:
           echo "Installing dependencies from cached pnpm store..."
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install --frozen-lockfile --prefer-offline
 
-      - name: Install Playwright browsers for projects that use it
+      - name: Install Playwright browsers and deps
         run: |
-          # Ensure system deps are present on the runner, then ensure the browser is installed.
-          pnpm exec playwright install-deps chromium
-          pnpm exec playwright install chromium
+          # Install both browser and system deps.
+          # Use --with-deps to install system dependencies alongside browser.
+          # Retry up to 3 times to handle apt lock contention from parallel jobs.
+          for i in 1 2 3; do
+            pnpm exec playwright install --with-deps chromium chromium-headless-shell && break
+            echo "Attempt $i failed, retrying in 10 seconds..."
+            sleep 10
+          done
 
       - name: Run sample webpack e2e tests
         timeout-minutes: 30
         id: run-webpack-e2e-tests
         run: |
           node -v
-          pnpm --filter "${{ matrix.container }}" legacy:e2e:ci
+          pnpm --filter "${{ matrix.container }}" run --if-present legacy:e2e:ci
           (lsof -i tcp:3000-3999 -i tcp:4000-4999 -i tcp:8080-8100 | awk 'NR!=1 {print $2}' | xargs -r kill) 2> /dev/null
 
       - name: Run sample rspack e2e tests
         timeout-minutes: 30
         id: run-rspack-e2e-tests
         run: |
           node -v
-          pnpm --filter "${{ matrix.container }}" e2e:ci
+          pnpm --filter "${{ matrix.container }}" run --if-present e2e:ci
           (lsof -i tcp:3000-3999 -i tcp:4000-4999 -i tcp:8080-8100 | awk 'NR!=1 {print $2}' | xargs -r kill) 2> /dev/null
 
       - name: Create artifacts for test reports
 
@@ -98,9 +98,7 @@ jobs:
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
-          restore-keys: |
-            playwright-${{ runner.os }}-
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}-headless-shell
 
       - name: Set Playwright cache status
         run: echo "PLAYWRIGHT_CACHE_HIT=${{ steps.playwright-cache.outputs.cache-hit }}" >> $GITHUB_ENV
@@ -116,4 +114,4 @@ jobs:
       - name: Install Playwright browsers
         run: |
           # Populate the shared browser cache (no system deps here).
-          pnpm exec playwright install chromium
+          pnpm exec playwright install chromium chromium-headless-shell
@@ -1,2 +1,6 @@
 child-concurrency=8
 registry=https://registry.npmjs.org/
+
+# Use a hoisted node_modules layout to reduce Webpack/Rspack resolution issues
+# caused by pnpm's content-addressable store + symlinked dependency graph.
+node-linker=hoisted
@@ -4,17 +4,17 @@
   "devDependencies": {
     "@babel/core": "7.24.7",
     "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@module-federation/enhanced": "0.22.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^5.5.4",
-    "@rspack/cli": "1.6.8",
-    "@rspack/core": "1.6.8",
-    "@rspack/dev-server": "1.1.4",
+    "@babel/preset-typescript": "^7.28.5",
+    "@module-federation/enhanced": "0.23.0",
+    "@rspack/cli": "1.7.4",
+    "@rspack/core": "1.7.4",
+    "@rspack/dev-server": "1.2.1",
+    "@types/react": "18.3.10",
+    "@types/react-dom": "18.3.0",
     "babel-loader": "9.1.3",
     "html-webpack-plugin": "5.6.0",
     "serve": "14.2.3",
+    "typescript": "^5.9.3",
     "webpack": "5.104.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4"
@@ -25,7 +25,7 @@
     "build:prod": "webpack --config webpack.prod.config.js",
     "legacy:start": "webpack serve --config webpack.config.js",
     "legacy:build": "webpack --config webpack.config.js --mode production",
-    "serve": "serve dist -p 3001",
+    "serve": "serve dist -p 3001 --cors",
     "clean": "rm -rf dist",
     "type-check": "tsc --noEmit",
     "analyze": "webpack-bundle-analyzer dist/static/js/*.js"
@@ -34,4 +34,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}
@@ -54,9 +54,11 @@ module.exports = {
   },
   plugins: [
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'app1',
       filename: 'remoteEntry.js',
       dts: false,
+      shareStrategy: 'loaded-first',
       remotes: {
         app2: 'app2@http://localhost:3002/remoteEntry.js',
       },
@@ -69,10 +71,14 @@ module.exports = {
         react: {
           singleton: true,
           requiredVersion: deps.react,
+          import: 'react',
+          shareScope: 'default',
         },
         'react-dom': {
           singleton: true,
           requiredVersion: deps['react-dom'],
+          import: 'react-dom',
+          shareScope: 'default',
         },
       },
     }),
 
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Module Federation Error Boundary caught an error:', error, errorInfo);
+  }
+
+  retry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      const FallbackComponent = this.props.fallback;
+
+      if (FallbackComponent) {
+        return <FallbackComponent error={this.state.error} retry={this.retry} />;
+      }
+
+      return (
+        <div style={{
+          padding: '20px',
+          border: '1px solid #ff6b6b',
+          borderRadius: '4px',
+          backgroundColor: '#ffe0e0',
+          margin: '10px 0'
+        }}>
+          <h3>Module Loading Error</h3>
+          <p>Failed to load remote module. This might be due to:</p>
+          <ul>
+            <li>Network connectivity issues</li>
+            <li>Remote application is not running</li>
+            <li>Version compatibility problems</li>
+          </ul>
+          <button
+            onClick={this.retry}
+            style={{
+              padding: '8px 16px',
+              backgroundColor: '#ff6b6b',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            Retry
+          </button>
+          <details style={{ marginTop: '10px' }}>
+            <summary>Error Details</summary>
+            <pre style={{
+              backgroundColor: '#f5f5f5',
+              padding: '10px',
+              borderRadius: '4px',
+              overflow: 'auto',
+              fontSize: '12px'
+            }}>
+              {this.state.error?.message}
+              {this.state.error?.stack}
+            </pre>
+          </details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
@@ -1 +1 @@
-import('./bootstrap');
+import './bootstrap';
@@ -1,11 +1,15 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ModuleFederationPlugin } = require('@module-federation/enhanced');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 
 const deps = require('./package.json').dependencies;
 
 module.exports = {
   entry: './src/index',
   mode: 'development',
+  output: {
+    publicPath: 'auto',
+    uniqueName: 'automatic_vendor_sharing_app1',
+  },
   devServer: {
     port: 3001,
     headers: {
@@ -28,9 +32,11 @@ module.exports = {
   },
   plugins: [
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'app1',
       filename: 'remoteEntry.js',
       dts: false,
+      shareStrategy: 'loaded-first',
       remotes: {
         app2: 'app2@http://localhost:3002/remoteEntry.js',
       },
@@ -41,10 +47,14 @@ module.exports = {
         react: {
           singleton: true,
           requiredVersion: deps.react,
+          import: 'react',
+          shareScope: 'default',
         },
         'react-dom': {
           singleton: true,
           requiredVersion: deps['react-dom'],
+          import: 'react-dom',
+          shareScope: 'default',
         },
       },
     }),
 
@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ModuleFederationPlugin, AutomaticVendorFederation } = require('@module-federation/enhanced');
+const { ModuleFederationPlugin, AutomaticVendorFederation } = require('@module-federation/enhanced/webpack');
 
 // Production configuration for optimized builds
 const deps = require('./package.json').dependencies;
@@ -63,6 +63,7 @@ module.exports = {
       name: 'app1',
       filename: 'remoteEntry.js',
       dts: false,
+      shareStrategy: 'loaded-first',
       remotes: {
         app2: 'app2@/remoteEntry.js', // Use relative URL for production
       },
@@ -82,16 +83,18 @@ module.exports = {
           singleton: true,
           requiredVersion: deps.react,
           eager: false,
+          import: 'react',
+          shareScope: 'default',
         },
         'react-dom': {
           singleton: true,
           requiredVersion: deps['react-dom'],
           eager: false,
+          import: 'react-dom',
+          shareScope: 'default',
         },
       },
-      experiments: {
-        federationRuntime: 'hoisted',
-      },
+      experiments: { asyncStartup: true },
     }),
     new HtmlWebpackPlugin({
       template: './public/index.html',
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-import('./bootstrap');`
	`1`	`+import './bootstrap';`