[Bug report] 多次修改样式调试时报：Cannot read property 'call' of undefined
cyjaysong opened this issue · comments
问题描述
刚学小程序开发，所以频繁的修改样式，在微信开发工具预览看效果。多次修改样式后，
预览控制台报Cannot read property 'call' of undefined ，组件无法正常展示，切换最新基础库也一样。
需要重新执行npm run serve 编译，再重新打开微信开发工具才能正常预览。
另外，重新执行npm run serve后，微信开发工具报在项目根目录未找到 app.json ,需要微信开发工具重新打开该项目才行
环境信息描述
至少包含以下部分：
- 系统类型：Mac
- Mpx依赖版本： ”@mpxjs/core": "^2.9.0", "@mpxjs/webpack-plugin": "2.9.29", "@mpxjs/api-proxy": "^2.9.0"
- 小程序开发者工具信息：小程序平台：微信，开发者工具版本：Stable 1.06.2402040；基础库版本：3.3.5，已关闭热重载
最简复现demo
TopNavBarlnfo.ts initTopNavBarInfo 在 onLaunch 中调用
import mpx, { createStore } from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'
mpx.use(apiProxy, { usePromise: true })
export const topNavBarInfoStore = createStore({
state: {
statusBarHeight: 0, // 状态栏高度
titleBarHeight: 0 // 标题栏高度
},
mutations: {
update(state, statusBarHeight: number, titleBarHeight: number) {
state.statusBarHeight = statusBarHeight
state.titleBarHeight = titleBarHeight
}
}
})
export function initTopNavBarInfo() {
let statusBarHeight = 47
const systemInfo = mpx.getSystemInfoSync()
statusBarHeight = systemInfo.statusBarHeight
// 获取胶囊信息
const menuButtonCapsule = mpx.getMenuButtonBoundingClientRect()
menuButtonCapsule.top = menuButtonCapsule.top || 52
menuButtonCapsule.height = menuButtonCapsule.height || 32
const { height, top } = menuButtonCapsule
// 计算标题栏高度
const titleBarHeight = height + (top - statusBarHeight) * 2
topNavBarInfoStore.commit('update', statusBarHeight, titleBarHeight)
}
HomeHeaderBar.mpx
<template>
<view
class="home-header-bar"
style="padding-top:{{statusBarHeight}}px;height:{{titleBarHeight}}px;">
<image src="../assets/svg/location.svg"/>
<text>{{ campusName }}</text>
<cube-icon type="arrow"/>
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
import { topNavBarInfoStore } from '../utils/TopNavBarInfo'
createComponent({
data: {
statusBarHeight: topNavBarInfoStore.state.statusBarHeight,
titleBarHeight: topNavBarInfoStore.state.titleBarHeight,
campusName: '北京大学'
}
})
</script>
<style lang="scss">
.home-header-bar {
width: 100%;
background-color: #ffa11a;
display: flex;
align-items: center;
image {
height: 30rpx;
width: 30rpx;
margin-right: 12rpx;
margin-left: 24rpx;
margin-bottom: 2rpx;
}
text {
font: 30rpx;
color: white;
vertical-align: middle;
}
cube-icon {
color: #fff;
}
}
</style>
<script type="application/json">
{
"component": true,
"usingComponents": {
"cube-icon": "@mpxjs/mpx-cube-ui/lib/components/icon/index.mpx"
}
}
</script>
@pagnkelly 可以看看这个情况吗
弄个最简单的demo，删了node_modules zip一下
@pagnkelly 原因好像是因为，编码的时候，vscode的自动保存开着，比如我正准备写padding: 36rpx; 才只打了padding: ，然后VSCode自动保存了，导致重新自动编译了，然后编译失败了。然后再继续把padding: 36rpx; 完整输入，再次自动编译的时候，虽然过了，但是微信开发工具却始终不能正常渲染
我这显示可以，尝试删除.cache
@Blackgan3 cache问题，你看下
@Blackgan3 cache问题，你看下
好，我看下
@CyJaySong 可以看下你的小程序开发者工具-详情-本地设置-启用代码自动热重载 是否打开哈
@Blackgan3 已关闭热重载
@Blackgan3 已关闭热重载
你打开和关闭热重载都能复现这个问题吗
@Blackgan3 是的
@Blackgan3 是的
奇怪的是我打开热重载功能是没复现这个问题的，不过 "在项目根目录里未找到app.json" 这个报错和Mpx框架本身是没关联的，看起来就是代码变动时小程序开发者工具感知错误。
@Blackgan3 无论是开启热重载还是关闭热重载，都有这个问题
@Blackgan3 会不会是环境相关问题呢，可以给一个参考吗
@Blackgan3 会不会是环境相关问题呢，可以给一个参考吗
你当前的node版本以及开发者工具版本是多少？可以尝试更新小程序开发者工具版本
@Blackgan3 Node版本: v16.20.0, 开发者工具版本：1.06.2402040
@Blackgan3 你好，有进展吗
