qiankun微服务子系统died问题

died问题也是qiankun微服务系统经常会碰到的问题,目前我碰到的都是因为自己系统配置或者代码问题引起的。

1.这个是自己调试过程中子系统的路由问题引起的。
qiankun_died_error1.png
qiankun_died_error2.jpg
qiankun_died_error3.jpg

error_4.png
2.该问题是由于主应用没有配置props给子应用
error4.png

Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry

qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出其导出的生命周期钩子。

可以通过以下几个步骤解决这个问题:

  1. 检查微应用是否已经导出相应的生命周期钩子,参考文档

  2. 检查微应用的 webpack 是否增加了指定的配置,参考文档

  3. 检查微应用的 webpack 是否配置了 output.globalObject 的值,如果有请确保其值为 window,或者移除该配置从而使用默认值。

  4. 检查微应用的 package.json 中的 name 字段是否是微应用中唯一的。

  5. 检查微应用的 entry html 中入口的 js 是不是最后一个加载的脚本。如果不是,需要移动顺序将其变成最后一个加载的 js,或者在 html 中将入口 js 手动标记为 entry,如:

    <script  src="/antd.js"></script>

    <script  src="/appEntry.js"  entry></script>

    <script  src="https://www.google.com/analytics.js"></script>
  1. 如果开发环境可以,生产环境不行,检查微应用的 index.htmlentry js 是否正常返回,比如说返回了 404.html

  2. 如果你正在使用 webpack5,请看这个 issues

如果在上述步骤完成后仍有问题,通常说明是浏览器兼容性问题导致的。可以尝试 将有问题的微应用的 webpack output.library 配置成跟主应用中注册的 name 字段一致,如:

假如主应用配置是这样的:

// 主应用

registerMicroApps([

  {

 name:  'brokenSubApp',

 entry:  '//localhost:7100',

 container:  '#yourContainer',

 activeRule:  '/react',

  },

]);

将微应用的 output.library 改为跟主应用中注册的一致:

module.exports  =  {

 output:  {

  // 这里改成跟主应用中注册的一致

 library:  'brokenSubApp',

 libraryTarget:  'umd',

 jsonpFunction:  `webpackJsonp_${packageName}`,

  },

};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容