empjs/emp

EMP Micro FE Base on Rspack & module federation

emp's Issues

alias别名设置无效果

empVue2Ts 脚手架
// 设置项目端口
config.devServer.port(port);
// emp-config中设置别名，程序run的过程中不识别
config.resolve.alias.set('@', resolve('src'))

错误如下：
ERROR in ./src/views/personal-center/routes.ts 5:11-74
Module not found: Error: Can't resolve '@/views/personal-center/government/Administrators.vue' in '/Users/alvin/Documents/dianzi/micro/emergency-wisdom-search/src/views/personal-center'
@ ./src/views/ sync routes.ts$ ./personal-center/routes.ts views/personal-center/routes.ts
@ ./src/router/index.ts 8:20-68
@ ./src/bootstrap.ts 6:0-30 24:10-16
@ ./src/main.ts 3:0-21

加载react组件运行时有异常会导致整个项目白屏

https://zh-hans.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

微信交流群二维码过期了，可以再来个验证码么

如标题

base把第三方组件库放组件里暴露出去，project去获取组件的时候获取到的是未编译的原dom，这个是需要在哪里配置嘛？

base：

project：

完全没有显示出来。。。

求大佬看一下，是不是因为未编译的原因呢？

emp自带babel有开关吗

react error ErrorBoundary hoc loader

基于react 隔离错误 避免大项目交叉影响而白屏

关于babel.config.js的使用

在 webpack 配置的源码里，如何更改useBuiltIns 为usage，

或者我们采用 babel.config.js

emp应该如何接入sass-loader

暴露配置信息

大佬，是否可以把这个config暴露出来，跟vue.config.js里配置内容一样配置？

HMR at Module Federation

module-federation/module-federation-examples#358

使用脚手架创建的vue3-base，引入element-plus报错

您好，使用脚手架创建的vue3-base之后，引入element-plus时代码报错；

然后我尝试添加vue.config.js，但是发现yarn dev走的是“emp dev“的命令，不会走我自己创建的webpack规则，请问有没有稍微完整的项目？

一个project引入两个base，会存在覆盖问题。

repo https://github.com/ckken/emp-vue-mutlehost
当两个base项目的package.json name的名字重复并且，路径组件名重复时，会产生覆盖问题。所以各位使用的时候，要确保package.json的name是唯一的。

0:0 error Parsing error: Cannot read property 'map' of undefined

报错源码

function useSyncRefState<T>(initialValue: T | (() => T)): [T, React.Dispatch<T>, React.RefObject<T>] {
//function body
}

其中一个文件需要改为以下代码才能移除报错

function useSyncRefState<T>(
  initialValue: T | (() => T),
): {
  [0]: T
  [1]: React.Dispatch<T>
  [2]: React.RefObject<T>
} {
// funnction body
}

vue2，babel-loader报错

ERROR in ./src/views/login/Login.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-12[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/views/login/Login.vue?vue&type=script&lang=ts&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/alvin/Documents/testProject/src/views/login/Login.vue: Unexpected token (39:18)

37 | })
38 | export default class extends BaseComponent {

39 | @ref() loginForm!: Form;

package.json
"devDependencies": {
"@efox/emp-cli": "latest",
"@efox/emp-vue2": "latest",
"babel-loader": "^8.1.0",
"vue-class-component": "^7.2.6",
"vue-loader": "^15.9.6",
"vue-property-decorator": "^9.1.2",
"vuex-module-decorators": "^1.0.1"
},

你这个emp本仓库代码项目使用了learn管理，如何快速调试 ，支持独立方式来 调试projects的项目？

你这个emp本仓库代码项目使用了learn管理，如何快速调试 ，支持独立方式来 调试projects的项目？

Types for repo.

Hi, I am pretty new to this module federation and stuff, and I kinda stumbled over your repo from the GitHub issue mentioned. Is there any way that I could use the type definitions for your repository, as VSCode yells for not having types on my webpack.config.ts. I might be missing something, but help from any of the contributors would be massive. Thanks.

(P.S I tried installing the @types thingy, yet it didn't work)

现有vue3+ts 接入，引用base的组件报错

远程调用项目的文件链接如何根据环境指定host名称

config.plugin("html").tap(args => {
console.log(process.env);

// console.log(process.env);
args[0] = {
  ...args[0],
  ...{
    title: "EMP Vue2 Project",
    files: {
      js: ["http://localhost:8009/emp.js"]
    }
  }
};
return args;

});

二次封装elementui组件库创建共享组件库，使用时不生效

通过二次封装element-ui组件库创建了一个共享的库。其他项目在使用该共享组件库中的组件的时候是未编译的状态，样式什么的都未生效，这个该怎么解决呀

组件react多版本依赖兼容

适配 17~16之间的冲突

webpack 更新至 5.10.3 报错

刚刚安装了一下其他的依赖 ，webpack也更新到了5.10.3 然后报错如下

<e> [webpack-dev-middleware] assets by path js/*.js 2.83 MiB
<e>   asset js/index.117f108e.js 1.95 MiB [emitted] [immutable] (name: index)
<e>   asset js/vendors-node_modules_vue-loader_lib_runtime_componentNormalizer_js-node_modules_vue-router_di-d611d3.e2bc78d8.js 815 KiB [emitted] [immutable] (id hint: vendors)
<e>   asset js/src_pages_index_vue.e1a3a2d3.js 58.5 KiB [emitted] [immutable]
<e>   asset js/src_bootstrap_js.6066d572.js 19.5 KiB [emitted] [immutable]
<e>   asset js/src_pages_page2_vue.c27497d1.js 12.8 KiB [emitted] [immutable]
<e> asset favicon.ico 3.08 KiB [emitted]
<e> asset index.html 1.91 KiB [emitted]
<e> runtime modules 10.1 KiB 14 modules
<e> modules by path ./node_modules/core-js/ 348 KiB
<e>   modules by path ./node_modules/core-js/modules/*.js 204 KiB 192 modules
<e>   modules by path ./node_modules/core-js/internals/*.js 144 KiB 157 modules
<e> modules by path ./src/ 19.1 KiB 22 modules
<e> modules by path ./node_modules/webpack-dev-server/client/ 71 KiB 12 modules
<e> modules by path ./node_modules/html-entities/lib/*.js 58.1 KiB 4 modules
<e> modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
<e> modules by path ./node_modules/url/ 37.4 KiB 3 modules
<e> modules by path ./node_modules/querystring/*.js 4.51 KiB
<e>   ./node_modules/querystring/index.js 127 bytes [built] [code generated]
<e>   ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
<e>   ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
<e> 9 modules
<e>
<e> ERROR in Error: Child compilation failed:
<e>   Cannot read property 'slice' of undefined
<e>   TypeError: Cannot read property 'slice' of undefined
<e>   
<e>   - plugin-webpack5.js:123 Object.resourceQuery [as fn]
<e>     [vue2-mf-base]/[vue-loader]/lib/plugin-webpack5.js:123:39
<e>   
<e>   - RuleSetCompiler.js:99 execRule
<e>     [vue2-mf-base]/[webpack]/lib/rules/RuleSetCompiler.js:99:21
<e>   
<e>   - RuleSetCompiler.js:118 execRule
<e>     [vue2-mf-base]/[webpack]/lib/rules/RuleSetCompiler.js:118:6
<e>   
<e>   - RuleSetCompiler.js:137 Object.exec
<e>     [vue2-mf-base]/[webpack]/lib/rules/RuleSetCompiler.js:137:6
<e>   
<e>   - NormalModuleFactory.js:403 
<e>     [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:403:34
<e>   
<e>   - NormalModuleFactory.js:116 
<e>     [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:116:11
<e>   
<e>   - NormalModuleFactory.js:544 
<e>     [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:544:8
<e>   
<e>   
<e>   - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
<e>     [vue2-mf-base]/[webpack]/[tapable]/lib/Hook.js:18:14
<e>   
<e>   - NormalModuleFactory.js:542 
<e>     [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:542:8
<e>   
<e>   
<e>   - NormalModuleFactory.js:232 
<e>     [vue2-mf-base]/[webpack]/lib/NormalModuleFactory.js:232:24
<e>   
<e>   
<e>   
<e>   - ExternalModuleFactoryPlugin.js:126 next
<e>     [vue2-mf-base]/[webpack]/lib/ExternalModuleFactoryPlugin.js:126:43
<e>   
<e>   - ExternalModuleFactoryPlugin.js:132 handleExternals
<e>     [vue2-mf-base]/[webpack]/lib/ExternalModuleFactoryPlugin.js:132:7
<e>   
<e>   - child-compiler.js:159 
<e>     [vue2-mf-base]/[html-webpack-plugin]/lib/child-compiler.js:159:18
<e>   
<e>   - Compiler.js:511 
<e>     [vue2-mf-base]/[webpack]/lib/Compiler.js:511:11
<e>   
<e>   - Compiler.js:1059 
<e>     [vue2-mf-base]/[webpack]/lib/Compiler.js:1059:17
<e>   
<e>   
<e>   - task_queues.js:93 processTicksAndRejections
<e>     internal/process/task_queues.js:93:5
<e>
<e> 1 ERROR in child compilations
<e> webpack 5.10.3 compiled with 2 errors in 1669 ms

jantimon/html-webpack-plugin#1574

请问vuex和redux的状态能否共享呢

Module Federation in MultiFramework Environment

module-federation/module-federation-examples#352
module-federation/module-federation-examples#504

已有的项目接入之后报错。

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

然后改成这样

node --max_old_space_size=4096 node_modules/.bin/emp dev

还是会一直增加内存的使用量，过一会儿又报那个问题了。

而且保存一次，就编译不出来了。卡住了

开发时有时候控制台会崩溃

<--- Last few GCs --->

[51786:0x10461d000] 14908944 ms: Scavenge (reduce) 2042.8 (2052.3) -> 2042.1 (2052.3) MB, 27.5 / 0.0 ms (average mu = 0.108, current mu = 0.095) allocation failure
[51786:0x10461d000] 14908985 ms: Scavenge (reduce) 2043.0 (2052.3) -> 2042.4 (2052.3) MB, 23.4 / 0.0 ms (average mu = 0.108, current mu = 0.095) allocation failure
[51786:0x10461d000] 14909033 ms: Scavenge (reduce) 2043.2 (2052.3) -> 2042.5 (2052.5) MB, 22.0 / 0.0 ms (average mu = 0.108, current mu = 0.095) allocation failure

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x1012762c5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000a2899 node::Abort() [/usr/local/bin/node]
3: 0x1000a29ff node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001e45b7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001e4553 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x10037dda5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x10037f61a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
8: 0x10037b5b7 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x100378f88 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x1003863da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x100386461 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x100355c17 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
13: 0x1006cd948 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x100a24519 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
15: 0x100a2db51 Builtins_SetPropertyInLiteral [/usr/local/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vue组件调用组件，渲染不正常

在base里面的content组件中，引入了一个test组件，但是在project中并没有渲染处理，并且报了警告：

引入的代码：

exposes的模块：

nuxt可以使用么？

我想在nuxt中使用如何实现呢

接入现有项目报错

UnhandledPromiseRejectionWarning: Error: Compiling RuleSet failed: Unexpected property test in condition

base没有的component，project里如何捕捉异常？

目前看到的是报错

throw new Error('Module "' + module + '" does not exist in container.');

在bootstrap.js里catch不到

try{
  const Abc = defineAsyncComponent(() => import('vue3Components/abc'))
  app.component('abc-element', Abc)
}catch(err){
  console.log(err)
}

Folder name is undefined

This is the output of yarn build

It gives folder name as undefined no matter what value I provide in output or path or even if I remove it.

webpack 5.0.0 compiled successfully in 9695 ms
[npm-dts] [info] :  ________________________________________ 
[npm-dts] [info] : |                                        |
[npm-dts] [info] : |                                        |
[npm-dts] [info] : |          npm-dts v1.3.6                |
[npm-dts] [info] : |          by Vytenis Urbonavičius       |
[npm-dts] [info] : |                                        |
[npm-dts] [info] : |________________________________________|
[npm-dts] [info] :
[npm-dts] [info] : Generating declarations for "F:\eMumbaProjects\js-porting-doc\spitz-webapp\web-app\federation"...
[npm-dts] [verbose] : Locating OS Temporary Directory...
[npm-dts] [verbose] : OS Temporary Directory was located!
[npm-dts] [verbose] : Will now reset "tmp" directory...
[npm-dts] [verbose] : Cleaning up "tmp" directory...
[npm-dts] [verbose] : "tmp" directory was cleaned!
[npm-dts] [verbose] : Preparing "tmp" directory...
[npm-dts] [verbose] : "tmp" directory was prepared!
[npm-dts] [verbose] : Generating per-file typings using TSC...
[npm-dts] [debug] : tsc --declaration --emitDeclarationOnly --declarationDir "C:\Users\Emumba\AppData\Local\Temp\tmp-26216-kUVWpx2n7A9Z\npm-dts"
[npm-dts] [verbose] : Per-file typings have been generated using TSC!
[npm-dts] [verbose] : Loading list of generated typing files...
[npm-dts] [verbose] : Successfully loaded list of generated typing files!
[npm-dts] [verbose] : Loading declaration files and mapping to modules...
[npm-dts] [verbose] : Loading package.json...
[npm-dts] [verbose] : package.json information has been loaded!
[npm-dts] [verbose] : Loaded declaration files and mapped to modules!
[npm-dts] [verbose] : Cleaning up "tmp" directory...
[npm-dts] [verbose] : "tmp" directory was cleaned!
[npm-dts] [verbose] : Combining typings into single file...
[npm-dts] [verbose] : Combined typings into a single file!
[npm-dts] [verbose] : Adding alias for main file of the package...
[npm-dts] [verbose] : Successfully created alias for main file!
[npm-dts] [verbose] : Ensuring that output folder exists...
[npm-dts] [debug] : Creating output folder: "F:\eMumbaProjects\js-porting-doc\spitz-webapp\web-app\federation\undefined\dist"...
[npm-dts] [verbose] : Output folder is ready!
[npm-dts] [verbose] : Storing typings into undefined//dist/federation.d.ts file...
[npm-dts] [verbose] : Successfully created undefined//dist/federation.d.ts file!
[npm-dts] [verbose] : Deleting OS Temporary Directory...
[npm-dts] [verbose] : OS Temporary Directory was deleted!
[npm-dts] [info] : Generation is completed!

项目启动时如何区分当前是开发环境还是生产环境？如何设置代理请求？

1、之前可以通过process.ENV.NODE_ENV来获取。
现在在emp-config.js里该值为undefined

2、设置代理请求时，在emp-config.js给config.devServer添加proxy属性值，结果没有效果，实际未进行代理转发。
然后在node_modules里的@efox/emp-cli/webpack/config/devServer.js文件里添加同样的代码，代理转发成功。

3、还有个小疑问是在哪里进行webpack自定义一些配置，如果是emp-config.js文件里写的话好像没有效果。

dva 项目如何接入

项目启动是通过dva 生成的app.start('#root')启动项目，如何接入emp呢
也是放到bootstrap文件中吗

base 项目怎么动态加载子应用的路由?

例如: base-vue 项目是个基础框架页面(也有自己的路由), 那么子 project 也是个多个路由的应用. 那如何加载呢? demo 里没看出给出官方方案或有什么 API ?

demo 运行报错

reactVue-vue，reactVue-react， 进入目录后 运行 yarn, 然后 执行 emp dev， 不能正常运行

React Component ErrorBoundary HOC loader

加载远程react组件后，react执行抛出异常时候，会导致项目白屏
https://zh-hans.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

emp-sync-vscode-plugin 如何指定本地地址

实际使用过程中，往往会出现其实所有项目都是由批开发者开发的。
所以本地地址如何指定

How typesafe can a remote be with Typescript?

module-federation/module-federation-examples#20

vue-cli 现有项目接入emp报错

╔════════════════════╤═══════════════╗
║ Emp & Deps │ Version ║
╟────────────────────┼───────────────╢
║ @efox/emp-cli │ 1.6.5 ║
╟────────────────────┼───────────────╢
║ webpack │ ^5.11.0 ║
╟────────────────────┼───────────────╢
║ webpack-dev-server │ ^4.0.0-beta.0 ║
╟────────────────────┼───────────────╢
║ typescript │ ^4.0.5 ║
╟────────────────────┼───────────────╢
║ postcss │ ^8.1.4 ║
╚════════════════════╧═══════════════╝

(node:56470) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (/Users/songtao/node_modules/webpack/lib/NormalModule.js:172:10)
at /Users/songtao/Documents/df/backend/node_modules/@efox/emp-vue2/node_modules/vue-loader/lib/plugin-webpack5.js:36:70
at Hook.eval [as call] (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:104:1)
at Hook.CALL_DELEGATE [as _call] (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:988:26)
at /Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:1029:29
at Hook.eval [as callAsync] (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:1024:28)
at /Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/lib/Watching.js:112:19
at _next0 (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at eval (eval at create (/Users/songtao/Documents/df/backend/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)

(Use node --trace-warnings ... to show where the warning was created)
(node:56470) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:56470) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

SSR/SSG(nextjs) demo

emp serve 读取了 emp-config 以及其他信息导致环境变量不一致报错的问题

需要提取公共配置信息

项目配置文件返回promise的时候，覆盖不了默认配置

https://github.com/efoxTeam/emp/blob/be31d74e42cefd95787249826e7e653989c23aed/packages/emp-cli/helpers/project.js#L37

这行改为

await remoteConfigFn({config, env, empEnv, hot, webpack}) 

会不会有什么影响呢

加入 css-minimizer-webpack-plugin 导致js 不压缩

config.optimization.minimizer('css').use(CssMinimizerPlugin, [
      {
        parallel: true,
        sourceMap: false,
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: {removeAll: true},
            },
          ],
        },
      },
    ])

无法使用antd的深色模式？

如题。

不支持vue jsx

是否需要改下babel配置？

Using v3 app inside of Vue2 app

module-federation/module-federation-examples#504

How can i share a component in Angular?

module-federation/module-federation-examples#506

Angular v11 support

Angular v11: Experimental webpack 5 Support. Now, teams can opt-in to webpack v5. Currently, you could experiment with module federation.
Please add Angular v11 demo

无法自定义环境变量 --env

vue3-base 如何给 vue3-project 传值呢

如题：vue3-base 如何给 vue3-project 传值， 或者共享状态呢

demo里的 INC 按钮 能不能同时增加 两个项目的值呢

动态注册子应用

现在子应用是在构建之前写死的，可以做到构建之后动态注册子应用吗