qiankun: TypeError: Cannot read properties of undefined (reading ‘appWrapperGetter‘)

最新推荐文章于 2023-10-22 09:55:29 发布
最新推荐文章于 2023-10-22 09:55:29 发布
阅读量2.2k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peade/article/details/124248890
版权

在我的qiankun项目里，往子应用跳转的时候，控制台输出了一段警告。

TypeError: Cannot read properties of undefined (reading 'appWrapperGetter')

查了很多资料，这个warn不能在控制台中删除。这个应该是qiankun自身的问题。

在发生产的时候，打包的时候，把console移除就没有了。

peade
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
qiankun 微前端应用实践与部署 微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发模式 # portal yarn yarn start # app1、app2 npm install npm run dev 生产模式 # portal yarn build # app1、app2 npm run build 主应用 主应用 js 文件引入 qiankun 注册子应用，并编写导航页显示跳转逻辑。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>QianKun Example</title> </head> <body> <div cla
vue-cli-plugin-qiankun:适用于微前端千库应用程序的vue-cli3插件
05-05
* vue-cli-plugin-qiankun* An Vue-cli3 Plugin for micro-frontend qiankun application 结合 qiankun 快速生成微前端应用的脚手架插件 Features qiankun 接入，子应用打包配置接入 修改 qiankun 官网 demo 中 vue 子应用 public 下静态资源加载不出来的问题 主应用和子应用中基础的路由处理 demo 中增加了父子组件之间通信的示例 IE下的兼容显示(关闭jsSandbox,fetch 增加 pollyfill) Demo Setup 主应用生成方式 vue create portal cd portal vue add vue-cli-plugin-qiankun-portal 子应用生成方式 vue create demo1 cd demo1 vue add vue-
qiankun：micro为微型前端提供快速，简单和完整的解决方案
02-04
千坤（乾坤） 在中国传统文化qian手段天堂， kun代表地，所以qiankun是宇宙。 基于的的实现，但使其可以投入生产。 :thinking_face: 动机 我们知道微前端的目标是： 与多个团队一起使用不同JavaScript框架构建现代Web应用程序的技术，策略和方法。 — 模块化对于大型应用程序非常重要。 通过将大型系统分解为单独的子应用程序，我们可以在产品之间以及必要的组合中实现良好的分而治之，特别是对于通常涉及多团队协作的企业应用程序而言。 但是，如果您尝试自己实现这样的微型前端体系结构系统，则可能会遇到一些棘手的问题： 子应用程序以什么形式发布静态资源？ 主应用程序如何集成单个子应用程序？
Cannot read properties of undefined (reading ‘getters‘)
qq_43382759的博客
03-23 7804
报错 Cannot read properties of undefined (reading 'getters') 解决方法： 具体的原因不清楚 重新把模块写成了 这种方式导出，原来使用的是mudole.export={}整体大对象的方式的导出的，一直报错
PDF预览异常：Cannot read properties of undefined (reading ‘getReader‘)
Nile_Holmes的博客
07-31 5114
PDF预览异常：Cannot read properties of undefined (reading ‘getReader’)
Cannot read properties of undefined (reading ‘target‘)
iijik55的博客
03-08 9292
<div class="switch" @click="toswitch()">编辑</div>//@click="toswitch(item)" methods:{ toswitch(item) { if (item.target.innerHTML == "编辑") { item.target.innerHTML = "完成"; } else { item.target.innerHTML = "编辑";
前端解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)的多种情况
热门推荐
sunwenpinglike的博客
03-21 31万+
例如：TypeError: Cannot read properties of undefined (reading '$el') at eval。
解决vue报TypeError: Cannot read properties of undefined (reading ‘getters‘)
weixin_41308436的博客
03-30 1万+
莫名其妙的报错 解决方法： 可能存在循环引用 devtools的问题，关闭就好了（版本3.1.5，暂不清楚什么原因）
Vue：TypeError: Cannot read properties of undefined (reading ‘_wrapper‘)
m0_58565372的博客
08-22 4299
今天遇到了这个bug，经过百度搜索，大概意思就是因为你的项目页面里面，写了方法名，但是没有在methods里面定义方法。我通过这个思路，发现自己就是这个原因，所以如果你遇到同样的bug，你可以去检查看看自己定义的方法，有没有在methods写入。
解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“
weixin_46433689的博客
05-30 24万+
问题描述：解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“ 问题解决： 情况一： 出现该错误的原因是因为你花括号中的某些属性未定义。很有可能是因为你写错了属性名称 情况二： 异步请求获取数据时，由于数据时异步获取的，所以一开始是没有该数据属性，这种情况下也会报这种错误。比如说我这里有一个数据detaildata，初始值为一个空对象。{{detaildata.name}}是不会报错的，但是，{{detaildata.
umi-plugin-qiankun:Umi plugin for qiankun
05-07
yarn startFeatures:check_mark:︎ 基于 qiankun:check_mark:︎ 支持主应用和子应用都用 umi:check_mark:︎ 支持主子应用 browser、hash 等多种 history 模式:check_mark:︎ 父子应用通讯:check_mark:︎ 子应用运行...
vite-plugin-qiankun:保留vite es特性，快速接入乾坤微前端子应用
08-04
vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件 保留vite构建es模块的优势 一键配置，不影响已有的vite配置 快速开始 1、在 vite.config.ts 中安装插件 // vite.config.ts import qiankun from 'vite-plugin-...
JavaScript(JS) firebase 报错：TypeError: Cannot read properties of undefined (reading ‘app‘)解决方法
weixin_42098295的博客
10-15 2199
本文主要介绍JavaScript(JS) 中，使用firebase SDK时报错TypeError: Cannot read properties of undefined (reading 'app')的解决方法。 原文地址：JavaScript(JS) firebase 报错：TypeError: Cannot read properties of undefined (reading 'app')解决方法 ...
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1012
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
解决 Cannot read properties of undefined类型的报错
nbsl_的博客
10-21 19万+
vue报错 “TypeError: Cannot read properties of undefined (reading...)
解决TypeError:Cannot read properties of undefined并深入解读TypeError错误类型
qq_52372698的博客
06-28 5万+
解决TypeError:Cannot read properties of undefined并深入解读TypeError错误类型 再根据axios官方文档给出的示例Axios实例 所以说instance是一个自定义的axios实例对象我们可以发现，上面的报错在于我没有在instance实例对象上挂载get方法就调用，导致报了TypeError反其道而行，我开始思考为什么这个问题报的错为什么是TypeError而不是别的错误类型深入研究一下Typ...
解决：Cannot read properties of undefined (reading ‘type‘)【vue3+echart5报错】
最新发布
weixin_58042855的博客
10-22 3506
问题关键在于echarts是否要设置为响应式对象
解决Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id‘)报错
m0_57524265的博客
06-28 3万+
前期上网查以为是axios异步请求的问题，后来一直尝试发现是访问对象的问题，每个人触发报错的前提都不相同，看看是否适合你！
vant 表单校验 实现
peade的博客
02-11 2万+
vant 里的input输入组件是Field，这个组件没有提供自定义校验的功能，只提供了email等特定几个值的校验。vant自身又没有form相关组件。 我们在开发的时候，总是免不了要用户填写表单，进行输入操作，这就免不了要对表单输入的值进行校验。 我之前的一篇博文介绍了vant + VeeValid做form表单校验的做法。 今天我在开发的时候，发现其实还有一个更简单的方式来实现表单校验的效果...
微前端 qiankun TypeError: Cannot read properties of null (reading 'insertBefore')
08-23
### 回答1： 这个错误消息表明在使用 qiankun 时，你的代码试图读取一个空对象的属性。可能是因为你在使用了一个未初始化或已经被赋值为 null 的变量，而该变量在该上下文中应该是一个有效的 DOM 元素。 请检查你的代码,并确保在使用 insertBefore 方法之前，所有必要的变量都已经正确地初始化并赋值。 ### 回答2： 在使用qiankun时，出现TypeError: Cannot read properties of null (reading 'insertBefore')错误，这通常是由于在插入子应用时，找不到要插入的DOM元素。在qiankun中，主应用会将子应用嵌入到特定的DOM节点中，如果该节点不存在或为null，就会出现这个错误。 解决这个问题需要检查以下几个方面： 1. 确保插入子应用的DOM节点存在并正确。在主应用中，我可以使用document.getElementById或类似的方法来获取需要插入的DOM节点，并在插入子应用之前进行有效性检查，确保该节点存在。 2. 确保在正确的时机插入子应用。在qiankun中，子应用的插入是在主应用的生命周期中进行的，通常在主应用的mounted或created钩子函数中完成。如果在子应用还没有被正确加载之前，就尝试插入到DOM节点中，也会导致找不到该节点的错误。 3. 检查子应用的注册配置。在主应用中，我们需要正确地配置子应用的注册信息，包括子应用的名称、路由等。如果配置有误，就可能导致找不到插入DOM节点的错误。 通过检查以上几个方面，我们可以解决这个TypeError: Cannot read properties of null (reading 'insertBefore')错误，确保成功插入子应用到主应用中。 ### 回答3： 微前端技术是一种将前端应用拆分成多个独立的子应用，以实现应用的模块化开发和相互嵌套的一种前端架构模式。在使用微前端框架qiankun时，有可能会遇到TypeError: Cannot read properties of null (reading 'insertBefore')这个错误。 这个错误通常是由于在某个页面的代码中，尝试对一个空（null）的元素执行insertBefore操作而引起的。在qiankun框架中，应用的渲染通常是在子应用的容器元素内进行的，因此在使用qiankun时，我们需要确保容器元素是有效的。 解决这个问题的方法有几种： 1. 确保容器元素的存在：在使用qiankun框架时，需要传入一个容器元素的选择器或DOM元素作为参数。在使用时，确保该容器元素存在，并且不为空。 2. 检查容器元素的加载时机：有时候，页面的DOM元素还未完全加载完成，就尝试执行qiankun的渲染操作，会导致容器元素为空。可以使用DOMContentLoaded事件或者将代码放在窗口加载事件load中执行，确保DOM元素已经加载完成。 3. 检查容器元素的选择器是否正确：在传入容器元素的选择器时，要确保选择器能够准确定位到正确的元素。可以通过在控制台输出容器元素的引用来检查选择器是否正确。 总结一下，TypeError: Cannot read properties of null (reading 'insertBefore')错误通常是在使用qiankun微前端框架时，由于容器元素为空导致的。通过确保容器元素的存在、检查容器元素的加载时机以及检查容器元素的选择器是否正确，可以解决这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值