fix(enhanced): plugin failure when federation runtime is unused (#2324)

Co-authored-by: ScriptedAlchemy <[email protected]>
Co-authored-by: 2heal1 <[email protected]>

Author: ScriptedAlchemy

.changeset/fuzzy-shirts-smoke.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/runtime': patch
+---
+
+Filter falsey runtime plugins from registerPlugins

.changeset/long-sheep-shave.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': patch
+---
+
+Check that runtime plugins are not undefined or tree shaken out before calling the factory functions

.github/workflows/build-and-test.yml

@@ -41,13 +41,13 @@ jobs:
         run: npx nx affected -t build --parallel=10 --exclude='*,!tag:type:pkg'
 
       - name: Run Affected Lint
-        run: npx nx affected -t lint --parallel=7 --exclude='*,!tag:package'
+        run: npx nx affected -t lint --parallel=7 --exclude='*,!tag:type:pkg'
 
       - name: Run Affected Test
         run: npx nx affected -t test --parallel=3 --exclude='*,!tag:type:pkg'
 
       - name: E2E Test for Next.js
-        run: pnpm run app:next:dev & echo "done" && sleep 50 && npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=2 && lsof -ti tcp:3000,3001,3002 | xargs kill
+        run: pnpm run app:next:dev & echo "done" && npx wait-on tcp:3000 && npx wait-on tcp:3001 && npx wait-on tcp:3002 && npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=2 && lsof -ti tcp:3000,3001,3002 | xargs kill
 
       #      - name: E2E Test for 3001-shop
       #        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3001-shop && lsof -ti tcp:3000,3001,3002 | xargs kill

.github/workflows/devtools.yml

@@ -35,7 +35,7 @@ jobs:
         run: pnpm install
 
       - name: Run Affected Build
-        run: npx nx build --parallel=10 --exclude='*,!tag:package'
+        run: npx nx build --parallel=10 --exclude='*,!tag:type:pkg'
 
       - name: Configuration xvfb
         shell: bash

.github/workflows/release.yml

@@ -48,7 +48,7 @@ jobs:
         run: pnpm install
 
       - name: Build and test Packages
-        run: npx nx run-many --target=build --exclude='*,!tag:package'
+        run: npx nx run-many --target=build --exclude='*,!tag:type:pkg'
 
       - name: Release
         uses: web-infra-dev/actions@v2

CONTRIBUTING.md

@@ -10,7 +10,7 @@ Thank you for your interest in contributing to Module Federation! Before startin
 4. Set up the development environment. Refer to the "Setup Development Environment" section below for guidance.
 5. If you've fixed a bug or added code that should be tested, add some tests.
 6. Ensure all tests pass. See the "Testing" section below for more information.
-7. Run `nx format:write` and `nx affected -t lint --parallel=7 --exclude='*,!tag:package'` to check and fix the code style.
+7. Run `nx format:write` and `nx affected -t lint --parallel=7 --exclude='*,!tag:type:pkg'` to check and fix the code style.
 8. If you've changed Node.js packages, run `npm run commit` for semantic versioning and commit.
 9. Submit the Pull Request, ensuring all CI runs pass.
 10. Your Pull Request will be reviewed by the maintainers soon.
@@ -88,7 +88,7 @@ Replace `PROJECT-NAME` with the actual name of the project you want to test. The
 To run tests only for the projects affected by recent changes, use:
 
 ```sh
-npx nx affected -t test --parallel=3 --exclude='*,!tag:package'
+npx nx affected -t test --parallel=3 --exclude='*,!tag:type:pkg'
 ```
 
 This command ensures that only relevant tests are executed, saving time and resources.

apps/3001-shop/pages/shop/index.tsx

@@ -49,16 +49,6 @@ Shop.getInitialProps = async () => {
   const timeout = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));
 
-  const fetchPromise = fetch('http://swapi.dev/api/planets/1/')
-    .then((res) => res.json())
-    .catch((err) => {
-      if (err instanceof Error) {
-        err.message = `fetchPromise failed: ${err.message}`;
-      }
-      console.error(err);
-      return Promise.resolve(fallback);
-    });
-
   const fallback = {
     name: 'Luke Skywalker',
     height: '172',
@@ -91,7 +81,7 @@ Shop.getInitialProps = async () => {
 
   const timerPromise = timeout(3000).then(() => fallback);
 
-  return Promise.race([fetchPromise, timerPromise]);
+  return Promise.race([timerPromise]);
 };
 
 export default Shop;

apps/3002-checkout/pages/checkout/index.tsx

@@ -47,10 +47,6 @@ Checkout.getInitialProps = async () => {
   const timeout = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));
 
-  const fetchPromise = fetch('http://swapi.dev/api/planets/1/').then((res) =>
-    res.json(),
-  );
-
   // this will resolve after 3 seconds
   const timerPromise = timeout(3000).then(() => ({
     userId: 1,
@@ -59,6 +55,6 @@ Checkout.getInitialProps = async () => {
     completed: false,
   }));
 
-  return Promise.race([fetchPromise, timerPromise]);
+  return Promise.race([timerPromise]);
 };
 export default Checkout;

package.json

@@ -24,7 +24,7 @@
     "docs": "typedoc",
     "lint": "nx run-many --target=lint",
     "test": "nx run-many --target=test",
-    "build": "nx run-many --target=build --parallel=3 --exclude='*,!tag:package'",
+    "build": "nx run-many --target=build --parallel=3 --exclude='*,!tag:type:pkg'",
     "build:pkg": "nx run-many --targets=build --projects=tag:type:pkg",
     "lint-fix": "nx format:write --uncommitted",
     "trigger-release": "node -e 'import(\"open\").then(open => open.default(\"https://github.com/module-federation/universe/actions/workflows/trigger-release.yml\"))'",
@@ -43,7 +43,7 @@
     "commitlint": "commitlint --edit",
     "prepare": "husky install",
     "changeset": "changeset",
-    "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:package'"
+    "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:type:pkg'"
   },
   "dependencies": {
     "adm-zip": "0.5.10",
@@ -143,6 +143,7 @@
     "@types/lodash.get": "4.4.9",
     "@types/node": "18.19.26",
     "@types/node-fetch": "2.6.11",
+    "@types/pidusage": "2.0.5",
     "@types/react": "18.2.62",
     "@types/react-dom": "18.2.19",
     "@types/webpack-sources": "3.2.3",
@@ -198,6 +199,7 @@
     "open": "^10.0.0",
     "openai": "3.3.0",
     "pdf-parse": "1.1.1",
+    "pidusage": "3.0.2",
     "postcss-calc": "9.0.1",
     "postcss-custom-properties": "13.3.5",
     "postcss-import": "15.1.0",
@@ -227,13 +229,12 @@
     "vitest": "1.2.2",
     "vitest-fetch-mock": "^0.2.2",
     "vue-tsc": "1.8.27",
+    "wait-on": "^7.2.0",
     "wast-loader": "^1.11.5",
     "webpack": "^5.90.0",
     "webpack-virtual-modules": "0.6.1",
     "whatwg-fetch": "^3.6.2",
-    "yargs": "^17.7.2",
-    "pidusage": "3.0.2",
-    "@types/pidusage": "2.0.5"
+    "yargs": "^17.7.2"
   },
   "config": {
     "commitizen": {

packages/dts-plugin/src/core/lib/DTSManager.advance.spec.ts

@@ -91,7 +91,11 @@ describe('DTSManager advance usage', () => {
     await dtsManager.consumeTypes();
 
     const targetFolder = join(projectRoot, hostOptions.typesFolder);
-    expect(dirTree(targetFolder, { exclude: /node_modules/ })).toMatchObject({
+    expect(
+      dirTree(targetFolder, {
+        exclude: [/node_modules/, /dev-worker/, /plugins/, /server/],
+      }),
+    ).toMatchObject({
       name: '@mf-types-dts-test-consume-types-advance',
       children: [
         {