[H5] 使用 Taro.xxx 接口的组件报错：Taro__default.default.xxx is not a function

[b2nil]

问题描述

详情见 #37

该问题是因 @tarojs/taro-h5 下提供的 Api 接口 未能通过 babel-plugin-transform-taroapi 正确转译所致。

https://github.com/NervJS/taro/tree/4c8a5ea9758f9c1c7e1efd1c9f4271a55c8feb97/packages/taro-h5 需要配合 babel-plugin-transform-taroapi 才能使用 ES6 default import 的语法，相关配置详情在 babel-preset-taro 中。

taro-ui-vue3 打包后提供三个格式的入口文件：

• UMD ('browser' in package.json ): taro-ui-vue3/dist/index.umd.js
• ES ('module' in package.json ): taro-ui-vue3/dist/index.esm.js
• CJS ('main' in package.json ): taro-ui-vue3/dist/index.js

目前在 h5 环境中使用 CJS 和 UMD 格式的入口文件都存在上面的问题。

因为 @tarojs/webpack-runner 编译的入口顺序是 mainFields: ['main:h5', 'browser', 'module', 'main']， 所以优先引用了 UMD 入口。

版本信息

v1.0.0-alpha.8

涉及的平台

h5

错误信息

index.umd.js?aa1b:42 Uncaught (in promise) TypeError: Taro__default.default.createSelectorQuery is not a function
at delayQuerySelector (index.umd.js?aa1b:42)

临时解决方案

在 taro-ui-vue3 或者 Taro 解决该问题前，请先使用以下临时解决方案：

1. 在 webpack 配置中添加一条 alias 配置，将 taro-ui-vue3 入口指向 index.esm.js

   alias: {
     "taro-ui-vue3$": "taro-ui-vue3/dist/index.esm.js"  // 注意加 $, 否则会导致样式引用报错
   }

   或者

2. 在 node_modules/taro-ui-vue3/package.json 中添加 "main:h5": index.esm.js

[b2nil]

fixed in c0214e1