[Bug report] 多次修改样式调试时报：Cannot read property 'call' of undefined

[cyjaysong]

问题描述
刚学小程序开发，所以频繁的修改样式，在微信开发工具预览看效果。多次修改样式后，
预览控制台报Cannot read property 'call' of undefined ，组件无法正常展示，切换最新基础库也一样。
需要重新执行npm run serve 编译，再重新打开微信开发工具才能正常预览。
另外，重新执行npm run serve后，微信开发工具报在项目根目录未找到 app.json ,需要微信开发工具重新打开该项目才行

环境信息描述
至少包含以下部分：

1. 系统类型：Mac
2. Mpx依赖版本： ”@mpxjs/core": "^2.9.0", "@mpxjs/webpack-plugin": "2.9.29", "@mpxjs/api-proxy": "^2.9.0"
3. 小程序开发者工具信息：小程序平台：微信，开发者工具版本：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>

[cyjaysong]

@pagnkelly 可以看看这个情况吗

[pagnkelly]

弄个最简单的demo，删了node_modules zip一下

[cyjaysong]

@pagnkelly demo.zip

[cyjaysong]

@pagnkelly 原因好像是因为，编码的时候，vscode的自动保存开着，比如我正准备写padding: 36rpx; 才只打了padding: ，然后VSCode自动保存了，导致重新自动编译了，然后编译失败了。然后再继续把padding: 36rpx; 完整输入，再次自动编译的时候，虽然过了，但是微信开发工具却始终不能正常渲染

[pagnkelly]

我这显示可以，尝试删除.cache

[cyjaysong]

@pagnkelly 这是录屏视频
https://f.ws59.cn/f/dsb4onbrvyo

[pagnkelly]

@Blackgan3 cache问题，你看下

[Blackgan3]

@Blackgan3 cache问题，你看下

好，我看下

[Blackgan3]

@cyjaysong 可以看下你的小程序开发者工具-详情-本地设置-启用代码自动热重载 是否打开哈

[cyjaysong]

@Blackgan3 已关闭热重载

[Blackgan3]

@Blackgan3 已关闭热重载

你打开和关闭热重载都能复现这个问题吗

[cyjaysong]

@Blackgan3 是的

[Blackgan3]

@Blackgan3 是的

奇怪的是我打开热重载功能是没复现这个问题的，不过 "在项目根目录里未找到app.json" 这个报错和Mpx框架本身是没关联的，看起来就是代码变动时小程序开发者工具感知错误。

[cyjaysong]

@Blackgan3 无论是开启热重载还是关闭热重载，都有这个问题

[cyjaysong]

@Blackgan3 会不会是环境相关问题呢，可以给一个参考吗

[Blackgan3]

@Blackgan3 会不会是环境相关问题呢，可以给一个参考吗

你当前的node版本以及开发者工具版本是多少？可以尝试更新小程序开发者工具版本

[cyjaysong]

@Blackgan3 Node版本: v16.20.0, 开发者工具版本：1.06.2402040

[cyjaysong]

@Blackgan3 你好，有进展吗

[hiyuki]

https://github.com/didi/mpx/releases/tag/v2.9.31
已修复

[cyjaysong]

@hiyuki 重新执行npm run serve后，微信开发工具报在项目根目录未找到 app.json ,这个问题还没修复。还是需要微信开发工具重新打开该项目才行