chore: asyncStartup for pure webpack/rspack examples only

.github/workflows/on-pull-request.yml

@@ -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
@@ -154,11 +165,12 @@ jobs:
         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
 
       - name: Create matrix
         id: set-matrix
@@ -186,6 +198,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
@@ -242,11 +265,16 @@ 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 && break
+            echo "Attempt $i failed, retrying in 10 seconds..."
+            sleep 10
+          done
 
       - name: Run sample webpack e2e tests
         timeout-minutes: 30

.npmrc

@@ -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

MIG.md

@@ -0,0 +1,78 @@
+# Migration Guide: Enhanced Module Federation
+
+Use this guide to migrate the examples to `@module-federation/enhanced` for both Webpack and Rspack, enable `asyncStartup`, and ensure correct entrypoint behavior.
+
+Do not make any changes to rsbuild or modernjs or nextjs based apps. only pure webpack and rspack 
+
+## 1) Use Enhanced Module Federation
+- Webpack: import `@module-federation/enhanced/webpack` and use its `ModuleFederationPlugin`.
+- Rspack: import `@module-federation/enhanced/rspack` and use its `ModuleFederationPlugin`.
+Use the latest stable version on npm, add it to the package.json or update it in the app if needed
+
+## 2) Rspack: use canary aliases (if required)
+Add the canary aliases to `package.json` to ensure compatibility:
+
+```json
+{
+  "devDependencies": {
+    "@rspack/core": "npm:@rspack-canary/[email protected]",
+    "@rspack/cli": "npm:@rspack-canary/[email protected]"
+  }
+}
+```
+
+## 3) Enable async startup
+Set `experiments.asyncStartup = true` on the `ModuleFederationPlugin` options.
+
+Webpack example:
+```js
+// webpack.config.js
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
+
+module.exports = {
+  plugins: [
+    new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
+      // name, remotes, exposes, shared, etc.
+    }),
+  ],
+};
+```
+
+Rspack example:
+```js
+// rspack.config.js
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
+
+module.exports = {
+  plugins: [
+    new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
+      // name, remotes, exposes, shared, etc.
+    }),
+  ],
+};
+```
+
+## 4) Make entrypoints eager
+Ensure the application bootstrap is imported eagerly. Replace dynamic imports of the bootstrap with a static import.
+
+Before:
+```js
+import('./bootstrap');
+```
+
+After:
+```js
+import './bootstrap';
+```
+
+This guarantees the runtime starts immediately and coordinates correctly with `asyncStartup`.
+
+## 5) Verify
+- Run the dev server and navigate through routes that consume remotes.
+- Confirm remotes load on first usage without timing issues.
+- Check browser console for shared resolution or initialization errors.
+
+## Notes
+- Do not lazy-import the bootstrap entry when `asyncStartup` is enabled.

advanced-api/automatic-vendor-sharing/app1/package.json

@@ -4,17 +4,17 @@
   "devDependencies": {
     "@babel/core": "7.24.7",
     "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/preset-typescript": "^7.28.5",
     "@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/cli": "npm:@rspack-canary/[email protected]",
+    "@rspack/core": "npm:@rspack-canary/[email protected]",
     "@rspack/dev-server": "1.1.4",
+    "@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"
@@ -34,4 +34,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

advanced-api/automatic-vendor-sharing/app1/rspack.config.js

@@ -54,6 +54,7 @@ module.exports = {
   },
   plugins: [
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'app1',
       filename: 'remoteEntry.js',
       dts: false,

advanced-api/automatic-vendor-sharing/app1/src/index.js

@@ -1 +1 @@
-import('./bootstrap');
+import './bootstrap';

advanced-api/automatic-vendor-sharing/app1/webpack.config.js

@@ -1,5 +1,5 @@
 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;
 
@@ -28,6 +28,7 @@ module.exports = {
   },
   plugins: [
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'app1',
       filename: 'remoteEntry.js',
       dts: false,

advanced-api/automatic-vendor-sharing/app1/webpack.prod.config.js

@@ -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;

advanced-api/automatic-vendor-sharing/app2/package.json

@@ -4,17 +4,17 @@
   "devDependencies": {
     "@babel/core": "7.24.7",
     "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/preset-typescript": "^7.28.5",
     "@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/cli": "npm:@rspack-canary/[email protected]",
+    "@rspack/core": "npm:@rspack-canary/[email protected]",
     "@rspack/dev-server": "1.1.4",
+    "@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"
@@ -34,4 +34,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

advanced-api/automatic-vendor-sharing/app2/rspack.config.js

@@ -54,6 +54,7 @@ module.exports = {
   },
   plugins: [
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'app2',
       filename: 'remoteEntry.js',
       dts: false,

advanced-api/automatic-vendor-sharing/app2/src/index.js

@@ -1 +1 @@
-import('./bootstrap');
+import './bootstrap';

advanced-api/automatic-vendor-sharing/app2/webpack.config.js

@@ -1,5 +1,5 @@
 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;
 
@@ -28,6 +28,7 @@ module.exports = {
   },
   plugins: [
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'app2',
       filename: 'remoteEntry.js',
       dts: false,

advanced-api/automatic-vendor-sharing/app2/webpack.prod.config.js

@@ -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;

advanced-api/dynamic-remotes-runtime-environment-variables/host/package.json

@@ -7,8 +7,8 @@
     "@module-federation/enhanced": "0.22.0",
     "@module-federation/runtime": "0.22.0",
     "@module-federation/retry-plugin": "0.17.1",
-    "@rspack/cli": "1.6.8",
-    "@rspack/core": "1.6.8",
+    "@rspack/cli": "npm:@rspack-canary/[email protected]",
+    "@rspack/core": "npm:@rspack-canary/[email protected]",
     "@rspack/dev-server": "1.1.4",
     "babel-loader": "9.1.3",
     "copy-webpack-plugin": "12.0.2",
@@ -35,4 +35,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

advanced-api/dynamic-remotes-runtime-environment-variables/host/rspack.config.js

@@ -69,6 +69,7 @@ module.exports = {
       ],
     }),
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'host',
       runtimePlugins: [],
       shared: {

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/index.js

@@ -1 +1 @@
-import('./bootstrap');
+import './bootstrap';

advanced-api/dynamic-remotes-runtime-environment-variables/host/webpack.config.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ModuleFederationPlugin } = require('@module-federation/enhanced');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 
@@ -42,6 +42,7 @@ module.exports = {
       ],
     }),
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'host',
       shared: {
         react: {

advanced-api/dynamic-remotes-runtime-environment-variables/remote/package.json

@@ -6,8 +6,8 @@
     "@babel/preset-react": "7.24.7",
     "@module-federation/enhanced": "0.22.0",
     "@module-federation/retry-plugin": "0.17.1",
-    "@rspack/cli": "1.6.8",
-    "@rspack/core": "1.6.8",
+    "@rspack/cli": "npm:@rspack-canary/[email protected]",
+    "@rspack/core": "npm:@rspack-canary/[email protected]",
     "@rspack/dev-server": "1.1.4",
     "babel-loader": "9.1.3",
     "html-webpack-plugin": "5.6.0",
@@ -34,4 +34,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

advanced-api/dynamic-remotes-runtime-environment-variables/remote/rspack.config.js

@@ -69,6 +69,7 @@ module.exports = {
       ],
     }),
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'remote',
       filename: 'remoteEntry.js',
       exposes: {

advanced-api/dynamic-remotes-runtime-environment-variables/remote/src/index.js

@@ -1 +1 @@
-import('./bootstrap');
+import './bootstrap';

advanced-api/dynamic-remotes-runtime-environment-variables/remote/webpack.config.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { ModuleFederationPlugin } = require('@module-federation/enhanced');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const deps = require('./package.json').dependencies;
 const path = require('path');
@@ -43,6 +43,7 @@ module.exports = {
       ],
     }),
     new ModuleFederationPlugin({
+      experiments: { asyncStartup: true },
       name: 'remote',
       filename: 'remoteEntry.js',
       exposes: {