@tarojs/runtime 热更新时报错

[nicainev]

相关平台

微信小程序

小程序基础库: 2.19.2
使用框架: React

复现步骤

开发编辑代码时，热重载报错，Cannot set property '$taroTimestamp' of undefined
at Ui.onLoad (.._src_dsl_common.ts:106)，导致热更新不能成功

期望结果

预期可以直接在开发者工具中运行最新代码

实际结果

报错导致热重载失败，必须得手动编译一遍

环境信息

Taro CLI 3.3.3 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
      npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD

[Chen-jj]

提供一下 demo

[nicainev]

demo需要哪些信息？我还没有个人的appid，公司项目不好泄露。。。

…

------------------ 原始邮件 ------------------ 发件人: "NervJS/taro" ***@***.***>; 发送时间: 2021年11月23日(星期二) 晚上7:10 ***@***.***>; ***@***.******@***.***>; 主题: Re: [NervJS/taro] @tarojs/runtime 热更新时报错 (Issue #10722) 提供一下 demo — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[rquanx]

直接初始化出来的项目也热更不了

Taro CLI 3.3.15 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.15.4 - C:\Program Files\nodejs\node.EXE       
      Yarn: 1.19.2 - D:\Program Files (x86)\Yarn\bin\yarn.CMD      
      npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD

[rquanx]

options是undefined

[rquanx]

@Chen-jj

[Chen-jj]

看来开发者工具热更新时，在 onLoad 触发是没有传递 options 参数。可以在 dist/taro.js 中为 onLoad 的 options 参数设置一个默认值试试还有没有其它问题。Taro 下个版本会为 options 增加默认值。

[rquanx]

@Chen-jj
默认值试过了，加了不会报错，但是热更新无效，页面不会更新

[wong2]

同遇到

[GreatAuk]

+1

[niyingg]

同遇到热更新不起作用，代码变动就报 Cannot set property '$taroTimestamp' of undefined,要手动编译，请问解决了吗?
小程序基础库: 2.21.0
使用框架: React
taro 3.3.16

[Chen-jj]

@Chen-jj 默认值试过了，加了不会报错，但是热更新无效，页面不会更新

@rquanx JS 热重载失败是因为 Webpack 对 modules 有缓存：

// dist/runtime.js (webpack runtime.js)
function __webpack_require__(moduleId) {
  // Check if module is in cache
  if(installedModules[moduleId]) {
    return installedModules[moduleId].exports;
  }
  // ......
}

可惜微信小程序没有暴露热更新的监听方法，否则可以统一处理 Webpack 缓存。

目前，开发者如果需要使用 JS 的热更新，可以在页面文件最后加上以下代码：

// 清除 Webpack 相关缓存
if (process.env.NODE_ENV !== 'production') {
  const cache = __webpack_require__.c
  Object.keys(cache).forEach(item => {
    // 假设当前页面的路径是 pages/index/index
    if (item.indexOf('pages/index/index') !== -1) delete cache[item]
  })
}

Taro 后续会考虑增加一个配置，为开发者自动加上上述代码以兼容微信小程序的热更新。

最后，JS 只有 Page 页面文件修改后才会触发热更新，依赖的组件修改后则不会触发热更新。（使用原生代码也测试过，应该是微信小程序的热更新还不支持监听页面依赖的文件）

[cnxzq]

react 下遇到了同样问题 ，暂时手动改了这个文件

node_modules\@tarojs\runtime\dist\runtime.esm.js

function createPageConfig(component, pageName, data, pageConfig) {
// ... 省略部分代码
    const config = {
        // onLoad(options, cb) {
        // 上面一句代码改成下面这句
        onLoad(options={}, cb) {

[Chen-jj]

Taro v3.4 会加入 mini.hot 配置，能自动加上这段兼容代码：https://docs.taro.zone/docs/next/mini-troubleshooting#%E7%83%AD%E9%87%8D%E8%BD%BD

[wong2]

感谢，现在要如何使用带了这个功能的 v3.4 ？看npm的beta版本还是老的

[Chen-jj]

感谢，现在要如何使用带了这个功能的 v3.4 ？看npm的beta版本还是老的

@wong2 v3.4 下个版本可能在下周发，目前就先手动在页面底部加上我上面提到的 Webpack 缓存清理代码咯

[Chen-jj]

感谢，现在要如何使用带了这个功能的 v3.4 ？看npm的beta版本还是老的

@wong2 v3.4 下个版本可能在下周发，目前就先手动在页面底部加上我上面提到的 Webpack 缓存清理代码咯

[wong2]

ok

[yuanhaozzz]

把热重载关掉就不报错了 - -

[zhoulujun]

这个问题，3.6.11，使用nutui， compiler: {
type: 'webpack5',
prebundle: {
enable: false,
},
},
还是不能热更新

[SxmAyuyu]

3.6.17依旧不能热重载

[shaohuahuang]

这个问题，3.6.11，使用nutui， compiler: { type: 'webpack5', prebundle: { enable: false, }, }, 还是不能热更新

我用的3.6.20也不能热重载

[shaohuahuang]

@Chen-jj 热重载的问题还是存在

[kemplaw]

still not work

[hissincn]

isn't work in 3.6.21

[GreatAuk]

开发几年了，好像就没有用过热更新，都是全量刷新页面。这个问题只是个别人有吗？