[3.0.0][H5] 使用了 Taro.xxx 的组件出现 _xxx is not defined 错误

[zousandian]

问题描述

taro v3 引入 taro-ui 3.0.0 版本，编译成 H5，部分组件在处理事件时会报错 _xxx is not defined

以 AtAccordion 组件为例，该组件使用了 Taro.createSelectorQuery 接口，编译成 H5， 点击组件会报错：
_createSelectorQuery is not defined。小程序正常。

复现步骤

不少人遇到问题了。

#1040
#1167
NervJS/taro#7300
NervJS/taro#7114

系统信息

Taro v3.0.0-rc.6
taro-ui 3.0.0-alpha.3

补充信息

经排查，是以下原因导致。

taro-h5 的 createSelectorQuery 等接口其实没有直接挂在 Taro 对象(为了 tree shaking)。
以下代码其实是通过 babel-plugin-transform-taroapi 插件转换了才能正常运行。

import Taro from '@tarojs/taro'
Taro.createSelectorQuery(...)

转换后的代码如下

import Taro { createSelectorQuery as _createSelectorQuery } from '@tarojs/taro'
_createSelectorQuery(...)

babel-plugin-transform-taroapi 插件做两件事情：

1. 把 import Taro from '@tarojs/taro' 转换成 import Taro, { xxx as _xxx } from '@tarojs/taro'
2. 把 Taro.xxx() 转换成 _xxx()

那么错误信息 _xxx is undefined 说明第二步转换成功了，第一步似乎没有成功，导致 _xxx undefined。

继续排查发现是 taro 引入 taro-ui 时使用了 index.umd.js 作为入口文件。

taro 默认的入口顺序为：['main:h5', 'browser', 'module', 'main']^[1]
而 taro-ui 3.0.0 的 package.json 中包含了以下几个入口：

"browser": "dist/index.umd.js",
"module": "dist/index.esm.js",
"main": "dist/index.js",
"source": "src/index.ts",

可以看到 index.umd.js 被命中了。

而 index.umd.js 中的 import Taro from '@tarojs/taro' 已经被编译成 umd 格式，导致插件找不到 import，无法完成第一步转换。具体细节可以看下这个插件的源码^[2]。

临时解决办法

在 taro-ui 3.0.0 的 package.json 中增加一个入口：

 "main:h5": "dist/index.esm.js",

让 taro 把 index.esm.js 作为 taro-ui 的入口即可。

[1] https://github.com/NervJS/taro/blob/next/packages/taro-webpack-runner/src/config/base.conf.ts#L22
[2] https://github.com/NervJS/taro/blob/next/packages/babel-plugin-transform-taroapi/src/index.ts#L107

[taro-ui-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[slobber]

临时解决方案可用

[ctcx]

希望官方早日修复这个BUG～

[dq77]

我也遇到了 临时方法可用

[easy261925]

希望官方早日修复这个BUG～

[YoursOwen]

可用，希望官方早点解决！

[Chen-jj]

taro-ui v3.0.0-alpha.4 已解决～

[Rpboy]

临时办法可用

[weiliang903]

Uncaught TypeError: _chunk_JIAELGKN_js__WEBPACK_IMPORTED_MODULE_3__.dist_default.chooseImage is not a function at AtImagePicker2._this.chooseFile (vendors-node_modules_taro_h5_prebundle_taro-ui_js.js:5766:74)

3.1.0 复现：

"taro-ui": "3.1.0-beta.4",
"@tarojs/cli": "3.5.12",
"@tarojs/webpack5-runner": "3.5.12",

[defkf]

"@tarojs/taro": "3.6.2",
"taro-ui": "^3.1.0-beta.4"
中临时方法不起作用，

可尝试 taro-ui/dist/index.esm.js 中 AtImagePicker (class) 中的 Taro.chooseImage(params) 改为 _this.chooseImage(params)

`
_this.chooseFile = function () {
Taro.chooseImage(params) 改为_this.chooseImage(params)
.then(...).catch(...)
}

`

[xiangxinji]

"@tarojs/taro": "3.6.2", "taro-ui": "^3.1.0-beta.4" 中临时方法不起作用，

可尝试 taro-ui/dist/index.esm.js 中 AtImagePicker (class) 中的 Taro.chooseImage(params) 改为 _this.chooseImage(params)

` _this.chooseFile = function () { Taro.chooseImage(params) 改为_this.chooseImage(params) .then(...).catch(...) }

`
这也太那啥了

[Lier1210]

感觉官方要无动于衷了，我两个月后再次使用还是有这个问题

[5idu]

"@tarojs/taro": "3.6.24",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"taro-ui": "^3.3.0"

使用上面的版本还是有报错：vendors-node_modules…chunkhash.js:1193 Uncaught TypeError: chunk_WTGTKQZK_js__WEBPACK_IMPORTED_MODULE_1_.taro.createSelectorQuery is not a function

官方这么长时间也不修复，我只能说，你NB，我不用你就是了

[forgivenoom]

"@tarojs/taro": "3.6.24",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"taro-ui": "^3.3.0"

使用上面的版本还是有报错：vendors-node_modules…chunkhash.js:1193 Uncaught TypeError: chunk_WTGTKQZK_js__WEBPACK_IMPORTED_MODULE_1_.taro.createSelectorQuery is not a function

官方这么长时间也不修复，我只能说，你NB，我不用你就是了

可以尝试下把taro-ui排除出prebundle, 3.6.9 & 3.3.0有效

// config/index.ts
compiler: {
  type: 'webpack5',
  prebundle: {
    exclude: ['taro-ui'],
  },
}