[qiankun]实战问题汇总

[qiankun]实战问题汇总

主要是在qiankun的实现过程中遇到的各种的问题，这里做一个汇总，方便以后的查阅

ERROR SyntaxError: Cannot use import statement outside a module

问题分析

该问题是在子应用中通过import引入package文件导致的

解决方案

解决方案说是node早先只支持CommonJS的模块化方案，所以ES6的模块化特性用不了。但是在Node V13.2.0之后开始实验性的支持ESM模块化，不过需要创建package.json文件指明type类型为module。

但是添加之后仍旧报错

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'

最后还是使用了require解决了该问题

const config =require('./package');

子应用命名问题

问题分析

该问题是在加载微前端服务的时候发生的，微服务无法正常加载，或者找不到微服务，如果你确定部署了该微服务的情况下，请确保该微服务的命名问题.

解决方案

output:{// 该值需要与主项目中注册时的name值相对应
            library:`${packageName}`,
            libraryTarget:'umd',
            jsonpFunction:`webpackJsonp_${packageName}`,}

一般这里的packageName是package.json中设置的name的值，也即项目名称，一般都使用英文，例如：micro-application

registerMicroApps([{
                name:projectName,//注册时的name值
                entry:projectDns,
                container:'#micro',
                activeRule:projectActiveRule,// 子应用触发规则（路径）
                props:{
                  user:{},
                  activeRule:projectActiveRule//用于动态设置子应用的路由前缀}}}])

projectName与

${packageName}

应该相同否则加载存在问题

‘jsonpFunction’

详细错误信息

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
         - configuration.output has an unknown property 'jsonpFunction'. These properties are valid:
           object { assetModuleFilename?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
           -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
           Did you mean output.chunkLoadingGlobal (BREAKING CHANGE since webpack 5)?

问题分析

output:{// 该值需要与主项目中注册时的name值相对应
            library:`${packageName}`,
            libraryTarget:'umd',
            jsonpFunction:`webpackJsonp_${packageName}`}

主要是该段代码导致的

解决方案

1. 该问题主要是微应用导出时jsonpFunction的设置值导致的，该值随着webpack5的升级没有该属性了，并且该属性与跨域无关。最开始线上部署的跨域问题，我一直以为和该属性的设置相关，但其实没有关系，直接删除该属性即可
2. 如果删除以上属性仍然存在报错可更改为以下的微服务导出设置

configureWebpack:{
        output:{
          library:{
            name:`${config.name}`,//项目名称值type:'umd'// 把子应用打包成 umd 库格式},}}

因为随着相关包的升级，配置方式也发生了变更，最终采用的配置方案是以上方式

微应用的注册问题

Uncaught Error: application 'cli5-beta6-test-name' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #childApp not existed while cli5-beta6-test-name loading!

以上是微服务注册时的报错信息

分析

关于问题1，主应用为VUE时，路由含有过渡效果，就会出现加载子应用的时候dom节点#childApp 不存在，但是加载前查看发现是存在的，感觉是加载的时候#childApp被覆盖了，查找相关代码，确保挂载微服务的时候该节点存在，可以修改微服务的注册时机，以确保容器渲染完成再加载微服务

single-spa.min.js?25a2:2 Uncaught Error: application 'cli5-beta6-test-name' died in status NOT_MOUNTED: [qiankun]: Target container with #childApp not existed while cli5-beta6-test-name mounting!

分析

说明它一开始是有container容器的，因为如果一开始就没有的话，报错应该是：Target container with #container not existed while xxx loading 一开始有，中途没有了，那就一定是有代码改变了document，导致container丢失。所以需要从这个原因取排查代码

解决方案

以上两个问题最终都通过相同的方式解决了，在设计路由的时候在主应用追加了

{
    path:"/micro/:pathMatch(.*)*",
    component:()=>import(/* webpackChunkName: "micro" */"../views/micro/index.vue")},

然后在views/micro/index.vue文件中添加dom,注册 container 设置为该dom

//主应用<div id="micro"></div>registerMicroApps([{
      name:'cli5-beta6-test-name', 
      entry:'http://localhost:8081',
      container:'#micro',
      activeRule:'#/micro/cli'// 子应用触发规则（路径）}])//子应用const router =createRouter({
  history:createWebHashHistory((window asany).__POWERED_BY_QIANKUN__ ?"/micro/cli":""),
  routes,});

子应用空白的问题

子应用如果是直接展示，内容可以正常加载出来，但是作为微服务没有内容
主应用App.vue,

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/cliChild">About</router-link>
  </div>
</template>

子应用App.vue是以下内容的

<template>
  <div id="root">
    mycontent
    <router-view v-slot="{ Component }">
      <transition name="router-fade" mode="out-in">
        <keep-alive>
          <component :is="Component"/>
           </keep-alive>
      </transition> 
    </router-view>
  </div>
</template>

这个问题最后发现是缺少 #，因为时hash路由，所以设置路由前缀的时候需要加上#

 history:createWebHashHistory((window asany).__POWERED_BY_QIANKUN__ ?"#/micro":"")

[Vue Router warn]: A hash base must end with a “#”:

在修复上面那个问题后，就出现了这个警告，这个警告很是奇怪，我只是希望设置路由时添加前缀

#/micro/sonApplicationPrefix

,但是就多了上面的警告信息

single-spa.min.js?25a2:2 Uncaught (in promise) Error: single-spa minified message #21

现象描述

该报错发生在我想多次注册统一名称的微服务的时候。某个微服务下可能存在多个路由页面，这些路由页面都希望能够被主应用中作为菜单加载，这就导致了同一个微服务被多次注册的现象（因为多个路由页面的微服务dns是相同的）

解决方案

因为是多个微服务注册发生的，所以要避免微服务的多次注册。在注册微服务之前我们要把同一个微服务的注册项过滤掉，因为该微服务只要注册过一次，当我们访问该微服务的其它路由页面的时候，会根据路径自动触发之前注册过的该微服务

微服务的挂载问题

现象描述

微服务挂载过程中，有一个微服务页面总是无法正常挂载，但是在该路由页面直接刷新页面的时候又正常挂载了，经过对比分析发现是微服务的渲染函数中，这一行代码导致的，这一行代码被写成了:

app.mount(container ? "#app" : "#app")

分析

微服务挂载的时候是根据主服务传递的 container 进行挂载的，因为 container是指定的主服务的容器，而

#app

则是子服务单独运行的挂载容器，因为主服务在加载子服务的时候 container是已经存在的，所以子服务挂载的位置应该是 container中包含的id为

app

的容器，因为如果是多页签页面可能存在多个

#app

,所以一定要指定是 container中的id为

app

的容器

解决方案

app.mount(container ? container.querySelector("#app") : "#app")

[qiankun] lifecycle not found from xxx-web entry exports, fallback to get from window[ ‘xxx-web’]

现象描述

该现象是微服务正常加载后出现的问题，也就说，除了多了该条警告信息，对于微服务的展示与加载没有其它影响，即使不处理也没有什么问题，但是该提示让强迫症的我有点纠结，还是找了找解决方案，不介意的话是可以跳过该问题的

解决方案

看到有说是因为注入的入口js文件，在html中不是最后的script标签导致的。
qiankun是通过html中的最后一个script文件，获取qiankun的生命周期，所以如果最后一个不是入口js文件就拿不到生命周期。看了一下本人的index.html文件，发现确实在injected后存在手动引入了一个js文件的现象，是不是该文件导致的？将该文件移到了head标签中引入，然后发现该警告问题消失了？！！！

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0">
  <% if (htmlWebpackPlugin.options.online) {%>
    <scripttype="text/javascript"src="<%= BASE_URL %>config.js"></script>
  <% } %>
  <title>xxx-web</title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong></noscript><divid="app"></div><!-- built files will be auto injected 打包后的注入文件添加到此处--></body></html>

App has already been mounted

微服务二次加载,该问题主要是微服务是否曾经加载过,并且页面不会在某些情况下重新渲染

App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g.

const createMyApp = () => createApp(App)

开始以为是路由缓存keep-alive的问题，去除路由缓存，尝试了多次都仍然存在问题，包括最上方的资源已注册问题，最后发现最根本的原因是因为路由发生变化的时候，没有卸载微服务
vue3.x的卸载方法

app.unmount();
    app = null;
    router = null;

其它遇到的一些微服务问题，因为内容篇幅较长，会分出来