使用mobx 6 时，字节小程序运行时报错

[onlyjq04]

相关平台

字节跳动小程序

复现仓库

https://github.com/onlyjq04/taro-tt-buid-issue.git
小程序基础库: 2.76.0.4
使用框架: React

复现步骤

yarn
yarn dev:tt

查看console报错, 查看了stack之后，通过vendor.js打的log如下

另外，微信小程序可以正常运行。

期望结果

能正常运行

实际结果

不能正常运行

环境信息

Taro CLI 3.5.10 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD

[lanxuexing]

使用radio-group也一样，就报红，很难受，但是不影响正常使用，就很难受～
版本：3.5.10

[Chen-jj]

@onlyjq04 Mobx 会判断 global 对象上有没有 Symbol、Map、Set 属性进而进行提示：

重点在于 getGlobal 函数，它首先取全局的 globalThis 对象，如果不存在再取 window。微信小程序是有 globalThis 对象的，所有内置方法、对象都在里面，而字节跳动小程序则没有 globalThis，所以取了 window。而小程序的 window 是 Taro 模拟的，它会合并 globalThis 上的方法与对象，但又回到字节小程序没有 globalThis，所以也没有这些方法，最终导致报错。

目前可行的 hack 方法是，手动在 app.js 文件中把 Symbol、Map、Set 附在 Taro 的 window 对象上：

window.Symbol = Symbol
window.Map = Map
window.Set = Set

[Chen-jj]

使用radio-group也一样，就报红，很难受，但是不影响正常使用，就很难受～ 版本：3.5.10

感觉不是同一个问题，可以新建一个 issue 再看看

[wreido]

@onlyjq04Mobx 会判断 global 对象上有没有 Symbol、Map、Set 属性进入并进行提示：

重点getGlobal函数函数，它首先的的的的的的的的，window window window。取。微信小小程序程序有有有有有有有有有有是是对象对象对象对象对象对象对象对象，所有所有，所有所有所有所有所有所有所有内置方法方法，，，对象对象对象对象里面window。而小程序的window是Taro模拟的，它会结合globalThis上的方法与对象，但又回到字节小程序也没有globalThis，所以没有这些方法，最终引导致报。

当前可执行的hack方法是，手动在app.js文件中把Symbol、Map、Set附在Taro的窗口对象上：

window.Symbol = Symbol
window.Map = Map
window.Set = Set

支付宝小程序出现类似问题，添加hack。也还是报错。

[Solyna]

@onlyjq04 Mobx 会判断 global 对象上有没有 Symbol、Map、Set 属性进而进行提示：

重点在于 getGlobal 函数，它首先取全局的 globalThis 对象，如果不存在再取 window。微信小程序是有 globalThis 对象的，所有内置方法、对象都在里面，而字节跳动小程序则没有 globalThis，所以取了 window。而小程序的 window 是 Taro 模拟的，它会合并 globalThis 上的方法与对象，但又回到字节小程序没有 globalThis，所以也没有这些方法，最终导致报错。

目前可行的 hack 方法是，手动在 app.js 文件中把 Symbol、Map、Set 附在 Taro 的 window 对象上：

window.Symbol = Symbol
window.Map = Map
window.Set = Set

还是报错啊，救急，帮忙再看看怎么处理

[Chen-jj]

目前可行的 hack 方法是，手动在 app.js 文件中把 Symbol、Map、Set 附在 Taro 的 window 对象上：

window.Symbol = Symbol
window.Map = Map
window.Set = Set

之前的确疏忽了，没有考虑到 app.js 中 import 使用了 mobx 时的情况。因此需要把这三句 hack 的执行时机再往前提，提到引用 mobx 之前。

我们可以编写一个 Taro 插件，其作用是在执行用户的 app.js 前注入一条 import，在 import 的文件内执行上述 hack 语句：

1. 创建插件目录

├── src
|
├── mobx-plugin         插件目录
|   ├── index.ts        插件代码
|   └── runtime.ts      注入的运行时 hack 代码
└── package.json

2. 编写插件代码

// mobx-plugin/index.ts
import * as path from 'path'
import { isArray, isString } from '@tarojs/shared'

import type { IPluginContext, TaroPlatformBase } from '@tarojs/service'

export default function (ctx: IPluginContext) {
  ctx.registerMethod({
    name: 'onSetupClose',
    fn (platform: TaroPlatformBase) {
      const injectedPath = 'post:' + path.resolve(__dirname, './runtime.ts')
      if (isArray(platform.runtimePath)) {
        platform.runtimePath.push(injectedPath)
      } else if (isString(platform.runtimePath)) {
        platform.runtimePath = [platform.runtimePath, injectedPath]
      }
    }
  })
}

// mobx-plugin/runtime.ts
window.Symbol = Symbol
window.Map = Map
window.Set = Set

3. 修改 Taro 编译配置，使用插件

// config/index.js
const config = {
  plugins: [
    require('path').resolve(__dirname, '../mobx-plugin/index.ts')
  ],
 ...
}

插件可以存放在目录本地，也可以单独抽取为 npm 包使用。

测试添加 hack 后，百度、字节、支付宝小程序都能正常使用 Mobx6。

[FTD-ZF]

@Chen-jj

目前可行的 hack 方法是，手动在 app.js 文件中把 Symbol、Map、Set 附在 Taro 的 window 对象上：

window.Symbol = Symbol
window.Map = Map
window.Set = Set

之前的确疏忽了，没有考虑到 app.js 中 import 使用了 mobx 时的情况。因此需要把这三句 hack 的执行时机再往前提，提到引用 mobx 之前。

我们可以编写一个 Taro 插件，其作用是在执行用户的 app.js 前注入一条 import，在 import 的文件内执行上述 hack 语句：

1. 创建插件目录

├── src
|
├── mobx-plugin         插件目录
|   ├── index.ts        插件代码
|   └── runtime.ts      注入的运行时 hack 代码
└── package.json

2. 编写插件代码

// mobx-plugin/index.ts
import * as path from 'path'
import { isArray, isString } from '@tarojs/shared'

import type { IPluginContext, TaroPlatformBase } from '@tarojs/service'

export default function (ctx: IPluginContext) {
  ctx.registerMethod({
    name: 'onSetupClose',
    fn (platform: TaroPlatformBase) {
      const injectedPath = 'post:' + path.resolve(__dirname, './runtime.ts')
      if (isArray(platform.runtimePath)) {
        platform.runtimePath.push(injectedPath)
      } else if (isString(platform.runtimePath)) {
        platform.runtimePath = [platform.runtimePath, injectedPath]
      }
    }
  })
}

// mobx-plugin/runtime.ts
window.Symbol = Symbol
window.Map = Map
window.Set = Set

3. 修改 Taro 编译配置，使用插件

// config/index.js
const config = {
  plugins: [
    require('path').resolve(__dirname, '../mobx-plugin/index.ts')
  ],
 ...
}

插件可以存放在目录本地，也可以单独抽取为 npm 包使用。

测试添加 hack 后，百度、字节、支付宝小程序都能正常使用 Mobx6。

在开发钉钉小程序中使用的 Mobx6，添加完这个插件运行还是报错

 "@tarojs/taro": "3.6.13",
  "mobx": "^6.10.0",

// config/index.js
const config = {
  plugins:['@tarojs/plugin-platform-alipay-dd', require('path').resolve(__dirname, '../mobx-plugin/index.ts'),],
 ...
}

 TypeError: c.make_ is not a function
    at Object.Qe [as make_] (index.worker.js?version=a8c7e162&from_service_worker=true&url=file%3A%2F%2F%2Findex.html&chInfo=ch_scan&referrerInfo={}&ap_framework_sceneId=1011:118:16...

Error: page 'pages/index/index' not found!
    at xn (VM70 af-appx.worker.min.js:26:89688)
    at Ar.$n [as newPage] (VM70 af-appx.worker.min.js:26:91753)
    at VM70 af-appx.worker.min.js:26:139172

[daizeming]

@onlyjq04Mobx 会判断全局对象上有没有Symbol、Map、Set属性前面进行提示：

重点在于getGlobal函数，它首先取全局的globalThis对象，如果不存在再取window。微信小程序是有globalThis对象的，所有的内置方法、对象都在里面，而字节跳动的小程序则没有globalThis，所以取了window。而小程序的window是Taro模拟的，它会合并globalThis上的方法和对象，但又回到了几十个小程序没有globalThis，所以也没有这些方法，最终导致报错。

目前可移植的 hack 方法是，手动在 app.js 文件中把 Symbol、Map、Set 附在 Taro 的 window 对象上：

window.Symbol = Symbol
window.Map = Map
window.Set = Set

抖音开发者工具版本：4.2.0
抖音基础库版本：3.12.0.1
mobx: 6.10.2
以上是我的开发环境信息，使用了您说的hack办法无法解决该问题呢。我在mobx源码中的getGlobal打印了log，发现是最终取的是globalThis，而不是取window对象。但是抖音小程序文档有写是禁止访问globalThis，我尝试添加属性，无法添加。请问还有其他的方法解决这个问题吗？