Taro V3 introduces taro-UI 3.0.0, which is compiled into H5. Some components report an error when handling events. _xxx is not defined
Take the example of the **AtAccordion ** component, which uses the Taro. CreateSelectorQuery interface and is compiled to H5. Clicking on the component will cause an error:
_createSelectorQuery is not defined. However, the compilation succeeds and the applet runs normally.
System information
"React" : "^ 16.10.0", "the react - dom" : "^ 16.10.0", "@ tarojs/taro" : "3.0.11" "taro - UI" : "three 3.0.0 - alpha."Copy the code

Problem solving
After investigation, the causes are as follows.
Taro-h5 interfaces such as createSelectorQuery are not actually hung directly on taro objects (for tree shaking).
The following code is actually converted by the babel-plugin-transform-taroAPI plug-in to work properly.
import Taro from '@tarojs/taro'
Taro.createSelectorQuery(...)
Copy the code

The transformed code looks like this
import Taro { createSelectorQuery as _createSelectorQuery } from '@tarojs/taro'
_createSelectorQuery(...)
Copy the code

The babel-plugin-transform-taroAPI plugin does two things:
  1. theimport Taro from '@tarojs/taro'Converted toimport Taro, { xxx as _xxx } from '@tarojs/taro'
  2. theTaro.xxx()Converted to_xxx()
Error message _xxx is undefined meaning the second step was successfully converted, the first step is not successful, resulting in _xxx undefined.
Further investigation found that taro used index.umd.js as the entry file when introducing taro-UI.
The default entry order for taro is 0: ‘[‘main:h5’, ‘browser’,’ Module ‘, ‘main’] ‘[1]
Taro – UI 3.0.0 package.json contains the following entries:
"browser": "dist/index.umd.js",
"module": "dist/index.esm.js",
"main": "dist/index.js",
"source": "src/index.ts",
Copy the code

You can see that index.umd.js is hit.
The ‘import Taro from ‘@tarojs/ Taro’ in index.umd.js has been compiled into UMD format, causing the plugin to not find the import and unable to complete the first step of conversion. See the plugin’s source code [2] for details.
Temporary solution
Add an entry to taro-UI 3.0.0 package.json:
"main:h5": "dist/index.esm.js",
Copy the code

Ask Taro to use index.esm.js as an entry point to taro-UI.