NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.46k stars 4.79k forks source link

部分手机报错 TypeError: Cannot read properties of null (reading \'mount\') #14504

Open 50431040 opened 1 year ago

50431040 commented 1 year ago

相关平台

微信小程序

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

复现步骤

本地未复现,但是We分析中有用户出现这个错误

期望结果

不报错

实际结果

报错

环境信息

Taro CLI 3.5.12 environment info:
    System:
      OS: macOS 13.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
      npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    npmPackages:
      @tarojs/components: 3.5.12 => 3.5.12
      @tarojs/helper: 3.5.12 => 3.5.12
      @tarojs/plugin-framework-react: 3.5.12 => 3.5.12
      @tarojs/plugin-platform-alipay: 3.5.12 => 3.5.12
      @tarojs/plugin-platform-jd: 3.5.12 => 3.5.12
      @tarojs/plugin-platform-qq: 3.5.12 => 3.5.12
      @tarojs/plugin-platform-swan: 3.5.12 => 3.5.12
      @tarojs/plugin-platform-tt: 3.5.12 => 3.5.12
      @tarojs/plugin-platform-weapp: 3.5.12 => 3.5.12
      @tarojs/react: 3.5.12 => 3.5.12
      @tarojs/router: 3.5.12 => 3.5.12
      @tarojs/runtime: 3.5.12 => 3.5.12
      @tarojs/shared: 3.5.12 => 3.5.12
      @tarojs/taro: 3.5.12 => 3.5.12
      @tarojs/taro-h5: 3.5.12 => 3.5.12
      @tarojs/webpack5-runner: 3.5.12 => 3.5.12
      babel-preset-taro: 3.5.12 => 3.5.12
      eslint-config-taro: 3.5.12 => 3.5.12
      react: ^18.2.0 => 18.2.0
      taro-ui: ^3.0.0-alpha.8 => 3.0.0-alpha.10

补充信息

We分析提供的错误信息: Cannot read properties of null (reading \'mount\') TypeError: Cannot read properties of null (reading \'mount\') at pi. (https://taro.js:1:69387) at o.safeCallback (https://lib/WASubContext.js:1:205075) at o.call (https://lib/WASubContext.js:1:204860) at t (https://lib/WASubContext.js:1:223261) at f (https://lib/WASubContext.js:1:223586) at d.pretendAttached (https://lib/WASubContext.js:1:235619) at https://lib/WASubContext.js:1:421667 at ts (https://lib/WASubContext.js:1:421718) at Module.ls (https://lib/WASubContext.js:1:422539) at Lt.create (https://lib/WASubContext.js:1:463096)

对应的代码片段是:

Tn.app.mount(e,r,(function(){u=xe.document.getElementById(r),(0,g.zx)(null!==u,"\u6ca1\u6709\u627e\u5230\u7ec4\u4ef6\u5b9e\u4f8b\u3002")

通过上面这一串unicode,可以定位到对应源码位置: taro-runtime/src/dsl/common.ts,搜索unicode转换后的中文:【没有找到页面实例。】。代码片段如下所示:

const mount = () => {
        Current.app!.mount!(component, $taroPath, () => {
          pageElement = env.document.getElementById<TaroRootElement>($taroPath)

          ensure(pageElement !== null, '没有找到页面实例。')
          safeExecute($taroPath, ON_LOAD, this.$taroParams)
          loadResolver()
          if (process.env.TARO_ENV !== 'h5') {
            pageElement.ctx = this
            pageElement.performUpdate(true, cb)
          } else {
            isFunction(cb) && cb()
          }
        })
      }

由于Current.app为null导致的,Current.app的赋值在文件:taro-plugin-react/src/runtime/connect.ts

在小程序环境里面,createReactApp会调用renderReactRoot方法,最后会对Current.app赋值。 不知道是不是 renderReactRoot 和 Current.app = appObj 的执行顺序导致的这个错误,希望能够解答下!!(React版本是18.2.0)

Chen-jj commented 1 year ago

@50431040 renderReactRoot 会初始化 React 并挂载 <AppWrapper>,但这部分应该是异步的,一般不影响后续同步流程中 Object.create 创建 appObj 并赋值给 Current.app

目前我猜测可能影响的点:

根据现有信息只能作一些推测,建议业务方看看能不能定位到具体机型和复现逻辑,或者魔改 dist/taro.js 的代码,当 Current.appnull 时,上报一些关键的变量及环境信息。

50431040 commented 1 year ago

@50431040 renderReactRoot 会初始化 React 并挂载 <AppWrapper>,但这部分应该是异步的,一般不影响后续同步流程中 Object.create 创建 appObj 并赋值给 Current.app

目前我猜测可能影响的点:

  • 赋值语句前存在报错。(如果你们的分析数据没有其他类似文件位置的报错,则应该不是)
  • Object.create API 返回了 null

根据现有信息只能作一些推测,建议业务方看看能不能定位到具体机型和复现逻辑,或者魔改 dist/taro.js 的代码,当 Current.appnull 时,上报一些关键的变量及环境信息。

据用户的反馈,现象是小程序白屏,后面重新进入又可以正常使用了。所以应该不是你说的这个原因,场景就是正常打开小程序,机型不是固定机型,基础库版本也不是固定的。不知道是不是低端手机容易复现。

50431040 commented 1 year ago
[ONUNLOAD] () {
      const $taroPath = this.$taroPath
      // 触发onUnload生命周期
      safeExecute($taroPath, ONUNLOAD)
      unmounting = true
      Current.app!.unmount!($taroPath, () => {
        unmounting = false
        instances.delete($taroPath)
        if (pageElement) {
          pageElement.ctx = null
          pageElement = null
        }
        if (prepareMountList.length) {
          prepareMountList.forEach(fn => fn())
          prepareMountList = []
        }
      })
    }

这里的 Current.app!.unmount 同样有报错:Cannot read properties of null (reading \'unmount\')

Chen-jj commented 1 year ago

@50431040 renderReactRoot 会初始化 React 并挂载 <AppWrapper>,但这部分应该是异步的,一般不影响后续同步流程中 Object.create 创建 appObj 并赋值给 Current.app。 目前我猜测可能影响的点:

  • 赋值语句前存在报错。(如果你们的分析数据没有其他类似文件位置的报错,则应该不是)
  • Object.create API 返回了 null

根据现有信息只能作一些推测,建议业务方看看能不能定位到具体机型和复现逻辑,或者魔改 dist/taro.js 的代码,当 Current.appnull 时,上报一些关键的变量及环境信息。

据用户的反馈,现象是小程序白屏,后面重新进入又可以正常使用了。所以应该不是你说的这个原因,场景就是正常打开小程序,机型不是固定机型,基础库版本也不是固定的。不知道是不是低端手机容易复现。

那建议加一些上报信息的,暂时没有什么更好的思路了

50431040 commented 1 year ago

根据错误开始出现的时间段,项目上的调整就是升级了React版本。

image
jamninetyfive commented 9 months ago

解决了吗

根据错误开始出现的时间段,项目上的调整就是升级了React版本。 image

Yang03 commented 4 months ago

这个问题依然存在,还都是android image