微信小程序里 @click.native.stop 在自定义组件上使用出现异常 TypeError: Cannot read property 'stopPropagation' of undefined

chuangbo commented 2 years ago

问题描述 @click.native.stop 在自定义组件上使用出现异常 TypeError: Cannot read property 'stopPropagation' of undefined

复现步骤

[复现问题的步骤]

完整复现代码 https://github.com/chuangbo/uniapp-issue-stop-propagation/commit/0ddebefabc873c2f9e564f3e55594f833aed5dc9

新建空白的 uniapp 项目 vue create -p dcloudio/uni-preset-vue my-uniapp-project

添加自定义组件

<template>
    <view>Button</view>
</template>

<script>
export default {}
</script>

显示这个组件，使用 @click.native.stop

<template>
    <view>
+        <my-btn @click.native.stop="handleClick" />
    </view>
</template>

<script>
export default {
    methods: {
+        handleClick() {},
    },
}
</script>

在微信小程序模拟器点击按钮
出现错误

TypeError: Cannot read property 'stopPropagation' of undefined
    at VueComponent._vm.e0 (index.vue?aef3:33)
    at index.js:1364
    at Array.forEach (<anonymous>)
    at index.js:1321
    at Array.forEach (<anonymous>)
    at ki.handleEvent [as __e] (index.js:1311)
    at Object.i.safeCallback (WASubContext.js?t=wechat&s=1646387308131&v=2.22.1:2)
    at WASubContext.js?t=wechat&s=1646387308131&v=2.22.1:2
    at wr (WASubContext.js?t=wechat&s=1646387308131&v=2.22.1:2)
    at WASubContext.js?t=wechat&s=1646387308131&v=2.22.1:2(env: macOS,mp,1.05.2112301; lib: 2.22.1)

系统信息:

发行平台: 微信小程序
操作系统 [微信开发者工具 1.05.2112301]
HBuilderX版本 [如使用HBuilderX，则需提供 HBuilderX 版本号]
uni-app版本 [如使用Vue-cli创建/运行项目，则提供npm run info的运行结果]
设备信息 [Mac]

$ node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js
uni-app v3.3.11
uni-app cli v2.0.1-33920220208001

Environment Info:

  System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 17.0.1 - /var/folders/b_/p5hyk_9x4kq9sfyztnkvnq0m0000gn/T/yarn--1646398514768-0.8498663316311674/node
    Yarn: 1.22.17 - /var/folders/b_/p5hyk_9x4kq9sfyztnkvnq0m0000gn/T/yarn--1646398514768-0.8498663316311674/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 94.0.1
    Safari: 15.3
  npmPackages:
    @dcloudio/types: * => 2.5.17
    @dcloudio/uni-app-plus: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-app-plus-nvue:  0.0.1
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1
    @dcloudio/uni-automator: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-cli-i18n: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-cli-shared: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-h5: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-helper-json: * => 1.0.13
    @dcloudio/uni-i18n: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-migration: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-360: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-alipay: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-baidu: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-jd: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-kuaishou: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-lark: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-qq: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-toutiao: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-vue: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-mp-weixin: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-quickapp-native: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-quickapp-webview: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-stat: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/uni-template-compiler: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/vue-cli-plugin-uni: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/webpack-uni-mp-loader: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @dcloudio/webpack-uni-nvue-loader:  0.0.1
    @dcloudio/webpack-uni-pages-loader: ^2.0.1-33920220208001 => 2.0.1-33920220208001
    @hap-toolkit/dsl-vue:  0.6.13
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.15
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.15
    @vue/cli-plugin-babel: ~4.5.13 => 4.5.15
    @vue/cli-plugin-router:  4.5.15
    @vue/cli-plugin-vuex:  4.5.15
    @vue/cli-service: ~4.5.13 => 4.5.15
    @vue/cli-shared-utils:  4.5.15
    @vue/component-compiler-utils:  3.3.0 (3.3.0)
    @vue/devtools-api:  6.0.0-beta.15
    @vue/preload-webpack-plugin:  1.1.2
    @vue/shared: ^3.0.0 => 3.2.31
    @vue/web-component-wrapper:  1.3.0
    mpvue-page-factory:  1.0.1
    mpvue-template-compiler:  1.0.13
    uni-h5-vue:  2.6.10
    uni-mp-vue:  2.6.10
    vue: ^2.6.11 => 2.6.14
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8 (16.8.3, 15.9.8)
    vue-router:  3.0.1
    vue-style-loader:  4.1.3 (4.1.3)
    vue-template-compiler: ^2.6.11 => 2.6.14 (2.6.14)
    vue-template-es2015-compiler:  1.9.1
    vue3:  1.0.0
    vuex: ^3.2.0 => 3.6.2 (3.6.2)
  npmGlobalPackages:
    @vue/cli: Not Found

补充信息 [可选] [根据你的分析，出现这个问题的原因可能在哪里？]

这个问题不是突然出现的，我们的项目好几年来一直没有这个问题，最近进行了 yarn upgrade 以后出现了错误。为了具体找到导致这个问题的包和版本，我使用了排除法，回滚了 yarn.lock，再一个包一个包的升级、测试。

最后发现所有 package.json 的直接依赖都可以安全升级，问题不会重现。直到又重新运行了 yarn upgrade，升级所有嵌套依赖，问题复现了。下面是最后一次问题出现前后的 yarn.lock 的 diff，下面几个包的版本发生了变化，怀疑是导致行为变化的原因。

 "@vue/babel-plugin-jsx@^1.0.3":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.6.tgz#184bf3541ab6efdbe5079ab8b20c19e2af100bfb"
-  integrity sha512-RzYsvBhzKUmY2YG6LoV+W5PnlnkInq0thh1AzCmewwctAgGN6e9UFon6ZrQQV1CO5G5PeME7MqpB+/vvGg0h4g==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
+  integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.0.0"
@@ -2145,9 +2178,9 @@
     strip-ansi "^6.0.0"

 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.2.tgz#2f7ed5feed82ff7f0284acc11d525ee7eff22460"
-  integrity sha512-rAYMLmgMuqJFWAOb3Awjqqv5X3Q3hVr4jH/kgrFJpiU0j3a90tnNBplqbj+snzrgZhC9W128z+dtgMifOiMfJg==
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
+  integrity sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==
   dependencies:
     consolidate "^0.15.1"
     hash-sum "^1.0.2"
@@ -2158,7 +2191,7 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
   optionalDependencies:
-    prettier "^1.18.2"
+    prettier "^1.18.2 || ^2.0.0"

 "vue-loader-v16@npm:vue-loader@^16.1.0":
-  version "16.3.3"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.3.3.tgz#e440e4eb12786e16138b5d98b612208f29ddf532"
-  integrity sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"
+  integrity sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==
   dependencies:
     chalk "^4.1.0"
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"

 vue-loader@^15.6.4, vue-loader@^15.9.2:
-  version "15.9.6"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b"
-  integrity sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==
+  version "15.9.8"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.8.tgz#4b0f602afaf66a996be1e534fb9609dc4ab10e61"
+  integrity sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==
   dependencies:
     "@vue/component-compiler-utils" "^3.1.0"
     hash-sum "^1.0.2"
@@ -11869,11 +11850,11 @@ w3c-xmlserializer@^1.1.2:
     xml-name-validator "^3.0.0"

另外，#2400 应该也是因为是自定义组件的问题。我测试过，如果 @click.native.stop 用在原生组件例如 button 上时，生成的代码是正确的，不会出现异常。

zhetengbiji commented 2 years ago

使用 npx @dcloudio/uvm alpha 更新依赖后试试

chuangbo commented 2 years ago

@zhetengbiji 使用这条命令更新到了 2.0.1-alpha-34520220408002，测试后问题已解决，感谢，请问这个版本大约什么时候稳定发布呢？

zhetengbiji commented 2 years ago

@zhetengbiji 使用这条命令更新到了 2.0.1-alpha-34520220408002，测试后问题已解决，感谢，请问这个版本大约什么时候稳定发布呢？

计划是1周左右

asd8855 commented 2 years ago

我们也遇到了。上线了吗

dcloudio / uni-app

微信小程序里 @click.native.stop 在自定义组件上使用出现异常 TypeError: Cannot read property 'stopPropagation' of undefined #3306