alibaba / rax

🐰 Rax is a progressive framework for building universal application. https://rax.js.org
Other
8k stars 627 forks source link

使用组件开发功能编写微信小程序原生组件,在app.json中指定"lazyCodeLoading": "requiredComponents"时触发报错 #2334

Closed Awen-hub closed 2 years ago

Awen-hub commented 2 years ago

⌨️

Where is the bug from?

Rax Components

Minimal code and steps to reproduce the bug

//组件1
export default () => {
  const toSecondPage = () => {
    wx.navigateTo({
      url: "/secondPage/index",
    });
  };
  return (
    <view>
      <button onClick={toSecondPage}>toSecondPage</button>
    </view>
  );
};

//组件2
export default () => {
  return (
    <view>
      hello world
    </view>
  );
};

Current and expected behavior

使用Rax组件开发功能,把两个Rax组件编译成微信小程序原生自定义组件,在页面firstPage中使用组件1,在页面secondPage中使用组件2。当点击firstPage中的跳转按钮跳转到secondPage,再点击左上角返回键返回firstPage,再次点击firstPage中的跳转按钮跳转到secondPage时在微信开发者工具中看到有报错,并且页面渲染白屏。

微信图片_20220321110730 微信图片_20220321111158 微信图片_20220321111228 微信图片_20220321111309

这个问题同时在微信开放社区给微信提供了反馈,目前不清楚是微信本身的问题还是Rax的渲染逻辑问题。更详细的报错和复现demo可以查看我在微信开放社区的反馈帖子 ,里面有可以直接在微信开发者工具打开的复现代码片段。

Environment

build.json

{ "type": "rax", "targets": ["wechat-miniprogram"], "plugins": ["build-plugin-component"], "outputDir": "dist", "minify": true }

Possible solution

如果删除在app.json中的"lazyCodeLoading": "requiredComponents"的配置项则可以正常使用,不清楚这个配置项怎么影响到编译时组件的运行以及是否有消除影响的方法。

Additional context

微信小程序配置项lazyCodeLoading说明文档

ChrisCindy commented 2 years ago

可以等待微信社区反馈。目前从报错上来看并非 Rax 这边的运行错误。

Awen-hub commented 2 years ago

微信图片_20220321162157 微信图片_20220321162204

从报错信息来看是jsx2mp库运行时候导致的报错,怀疑是指定了"lazyCodeLoading": "requiredComponents"导致rax的生命周期出现了一些问题导致渲染错误,希望你们这边可以从jsx2mp出发查看一下引发bug的原因,或者看看有没办法从Rax层面去规避这个Bug。

使用微信原生开发时候即便指定了"lazyCodeLoading": "requiredComponents"也没有发现这个问题,可能微信官方不会把这个当作Bug处理。

Awen-hub commented 2 years ago

继续调试了一下发现在使用"lazyCodeLoading": "requiredComponents"之后,微信小程序会在一个内置文件执行时reload,导致了变量被清空。目前已经有微信官方人员跟进。

Awen-hub commented 2 years ago

此Bug已被微信官方修复,升级最新的微信小程序基础库即可。