fix(enhanced): abort the compile process if not find the expose modules (#3373)

Author: 2heal1

.changeset/shaggy-flowers-cry.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/error-codes': patch
+'@module-federation/enhanced': patch
+'@module-federation/sdk': patch
+---
+
+fix(enhanced): abort process if not find expose modules

apps/website-new/docs/en/guide/troubleshooting/_meta.json

@@ -6,6 +6,12 @@
     "label": "Runtime",
     "collapsed":true
   },
+  {
+    "type": "dir",
+    "name": "build",
+    "label": "Build",
+    "collapsed":true
+  },
   {
     "type": "dir",
     "name": "type",

apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx

@@ -0,0 +1,18 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+
+<ErrorCodeTitle code='BUILD-001'/>
+
+## Reason
+
+The Expose module resource could not be found properly.
+
+There are two reasons for this problem:
+1. The exposeModules file path set by `exposes` is incorrect and points to a non-existent address.
+2. When using `Next.js` or other frameworks with built-in webpack, the webpack address used by MF is incorrect.
+
+## Solutions
+
+There are corresponding solutions for the reasons:
+
+1. Check whether the module file path corresponding to exposes is correct. Pay attention to the case here.
+2. Check whether FEDERATION_WEBPACK_PATH is consistent with the webpack address used by the framework. If not, you can check whether the dependency is installed normally, or set process.env.FEDERATION_WEBPACK_PATH to point to the actual webpack address used.

apps/website-new/docs/public/words-map.json

@@ -156,5 +156,53 @@
         }
       }
     }
+  },
+  "exposeModules":{
+    "id":"exposeModules",
+    "lang":{
+      "zh":{
+        "description":"Module Federation 中 expose 所对应的模块。",
+        "related_meta":{
+          "docs":[],
+          "links":[
+            {
+              "id":"webpack-modules-link",
+              "title":"Webpack modules",
+              "url":"https://webpack.docschina.org/concepts/modules/"
+            }]
+        }
+      },
+      "en":{
+        "description":"The module corresponding to expose in Module Federation.",
+        "related_meta":{
+          "docs":[],
+          "links":[
+            {
+              "id":"webpack-modules-link",
+              "title":"Webpack modules",
+              "url":"https://webpack.js.org/concepts/modules/#root"
+            }]
+        }
+      }
+    }
+  },
+  "FEDERATION_WEBPACK_PATH":{
+    "id":"FEDERATION_WEBPACK_PATH",
+    "lang":{
+      "zh":{
+        "description":"Module Federation 实际使用的 webpack 地址。",
+        "related_meta":{
+          "docs":[],
+          "links":[]
+        }
+      },
+      "en":{
+        "description":"The webpack address actually used by Module Federation.",
+        "related_meta":{
+          "docs":[],
+          "links":[]
+        }
+      }
+    }
   }
 }

apps/website-new/docs/zh/guide/troubleshooting/_meta.json

@@ -6,6 +6,12 @@
     "label": "运行时",
     "collapsed":true
   },
+  {
+    "type": "dir",
+    "name": "build",
+    "label": "构建",
+    "collapsed":true
+  },
   {
     "type": "dir",
     "name": "type",

apps/website-new/docs/zh/guide/troubleshooting/build/BUILD-001.mdx

@@ -0,0 +1,19 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+
+<ErrorCodeTitle code='BUILD-001'/>
+
+## 原因
+
+未能正常找到 Expose 模块资源。
+
+该问题原因有两个：
+1. `exposes` 设置的 exposeModules 文件路径不正确，指向一个不存在的地址。
+2. 使用了 `Next.js` 或其他内置了 webpack 的框架，MF 使用的 webpack 地址与其不对
+
+## 解决方法
+
+针对原因，有对应的解决方法：
+
+1. 检查 exposes 对应的模块文件路径是否正确，此处注意大小写。
+2. 检查 FEDERATION_WEBPACK_PATH 与框架使用的 webpack 地址是否一致，如果不对，可以查看依赖是否正常安装，或者设置 process.env.FEDERATION_WEBPACK_PATH 指向实际使用的 webpack 地址。
+

packages/enhanced/package.json

@@ -88,6 +88,7 @@
     "@module-federation/runtime-tools": "workspace:*",
     "@module-federation/manifest": "workspace:*",
     "@module-federation/managers": "workspace:*",
+    "@module-federation/error-codes": "workspace:*",
     "@module-federation/dts-plugin": "workspace:*",
     "@module-federation/rspack": "workspace:*",
     "@module-federation/bridge-react-webpack-plugin": "workspace:*",

packages/enhanced/src/lib/container/ContainerEntryModule.ts

@@ -5,6 +5,12 @@
 
 'use strict';
 import { normalizeWebpackPath } from '@module-federation/sdk/normalize-webpack-path';
+import { logger } from '@module-federation/sdk';
+import {
+  getShortErrorMsg,
+  buildDescMap,
+  BUILD_001,
+} from '@module-federation/error-codes';
 import type { containerPlugin } from '@module-federation/sdk';
 import type { Compilation, Dependency } from 'webpack';
 import type {
@@ -229,9 +235,13 @@ class ContainerEntryModule extends Module {
 
       let str;
       if (modules.some((m) => !m.module)) {
-        str = runtimeTemplate.throwMissingModuleErrorBlock({
-          request: modules.map((m) => m.request).join(', '),
-        });
+        logger.error(
+          getShortErrorMsg(BUILD_001, buildDescMap, {
+            exposeModules: modules.filter((m) => !m.module),
+            FEDERATION_WEBPACK_PATH: process.env['FEDERATION_WEBPACK_PATH'],
+          }),
+        );
+        process.exit(1);
       } else {
         str = `return ${runtimeTemplate.blockPromise({
           block,

packages/error-codes/src/desc.ts

@@ -8,6 +8,7 @@ import {
   RUNTIME_007,
   RUNTIME_008,
   TYPE_001,
+  BUILD_001,
 } from './error-codes';
 
 export const runtimeDescMap = {
@@ -25,7 +26,12 @@ export const typeDescMap = {
   [TYPE_001]: 'Failed to generate type declaration.',
 };
 
+export const buildDescMap = {
+  [BUILD_001]: 'Failed to find expose module.',
+};
+
 export const errorDescMap = {
   ...runtimeDescMap,
   ...typeDescMap,
+  ...buildDescMap,
 };

packages/error-codes/src/error-codes.ts

@@ -8,3 +8,4 @@ export const RUNTIME_007 = 'RUNTIME-007';
 export const RUNTIME_008 = 'RUNTIME-008';
 
 export const TYPE_001 = 'TYPE-001';
+export const BUILD_001 = 'BUILD-001';