is ant design support vue jsx

webmapLee commented 2 years ago

[ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.3.0-beta.2

Environment

"ant-design-vue": "^3.3.0-beta.2" "vue": "^3.2.37" "node":v16.14.0

Reproduction link

https://github.com/webmapLee/antd-demo

Steps to reproduce

pnpm start

What is expected?

work succesfull with vue jsx

What is actually happening?

runtime-core.esm-bundler.js:167

[Vue warn]: Property "isContextmenuToShow" was accessed during render but is not defined on instance. at <Trigger showAction= [] hideAction= [] popupPlacement="bottomLeft" ... > at <PickerTrigger visible=false popupStyle=undefined prefixCls="ant-picker" ... > at <Picker monthCellRender=undefined dateRender=undefined renderExtraFooter=undefined ... > at at warn @ runtime-core.esm-bundler.js:167 get @ runtime-core.esm-bundler.js:3912 render @ Trigger.js:759 renderComponentRoot @ runtime-core.esm-bundler.js:1211 componentUpdateFn @ runtime-core.esm-bundler.js:6711 run @ reactivity.esm-bundler.js:260 instance.update @ runtime-core.esm-bundler.js:6858 setupRenderEffect @ runtime-core.esm-bundler.js:6871 mountComponent @ runtime-core.esm-bundler.js:6604 processComponent @ runtime-core.esm-bundler.js:6554 patch @ runtime-core.esm-bundler.js:6075 componentUpdateFn @ runtime-core.esm-bundler.js:6721 run @ reactivity.esm-bundler.js:260 instance.update @ runtime-core.esm-bundler.js:6858 setupRenderEffect @ runtime-core.esm-bundler.js:6871 mountComponent @ runtime-core.esm-bundler.js:6604 processComponent @ runtime-core.esm-bundler.js:6554 patch @ runtime-core.esm-bundler.js:6075 componentUpdateFn @ runtime-core.esm-bundler.js:6721 run @ reactivity.esm-bundler.js:260 instance.update @ runtime-core.esm-bundler.js:6858 setupRenderEffect @ runtime-core.esm-bundler.js:6871 mountComponent @ runtime-core.esm-bundler.js:6604 processComponent @ runtime-core.esm-bundler.js:6554 patch @ runtime-core.esm-bundler.js:6075 componentUpdateFn @ runtime-core.esm-bundler.js:6721 run @ reactivity.esm-bundler.js:260 instance.update @ runtime-core.esm-bundler.js:6858 setupRenderEffect @ runtime-core.esm-bundler.js:6871 mountComponent @ runtime-core.esm-bundler.js:6604 processComponent @ runtime-core.esm-bundler.js:6554 patch @ runtime-core.esm-bundler.js:6075 mountChildren @ runtime-core.esm-bundler.js:6305 processFragment @ runtime-core.esm-bundler.js:6513 patch @ runtime-core.esm-bundler.js:6064 componentUpdateFn @ runtime-core.esm-bundler.js:6721 run @ reactivity.esm-bundler.js:260 instance.update @ runtime-core.esm-bundler.js:6858 setupRenderEffect @ runtime-core.esm-bundler.js:6871 mountComponent @ runtime-core.esm-bundler.js:6604 processComponent @ runtime-core.esm-bundler.js:6554 patch @ runtime-core.esm-bundler.js:6075 render @ runtime-core.esm-bundler.js:7483 mount @ runtime-core.esm-bundler.js:5325 app.mount @ runtime-dom.esm-bundler.js:2074 eval @ index.js:15 ./src/index.js @ path.js:27049 __webpack_require__ @ path.js:27397 (匿名) @ path.js:28487 (匿名) @ path.js:28489 Show 20 more frames runtime-core.esm-bundler.js:167

[Vue warn]: Unhandled error during execution of render function at <Trigger showAction= [] hideAction= [] popupPlacement="bottomLeft" ... > at <PickerTrigger visible=false popupStyle=undefined prefixCls="ant-picker" ... > at <Picker monthCellRender=undefined dateRender=undefined renderExtraFooter=undefined ... > at at

path.js:27400

Uncaught TypeError: this.isContextmenuToShow is not a function at Proxy.render (Trigger.js:759:14) at renderComponentRoot (runtime-core.esm-bundler.js:1211:38) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6711:46) at ReactiveEffect.run (reactivity.esm-bundler.js:260:19) at instance.update (runtime-core.esm-bundler.js:6858:51) at setupRenderEffect (runtime-core.esm-bundler.js:6871:5) at mountComponent (runtime-core.esm-bundler.js:6604:5) at processComponent (runtime-core.esm-bundler.js:6554:9) at patch (runtime-core.esm-bundler.js:6075:11) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6721:11)

webmapLee commented 2 years ago

我以为是由于我使用jsx 的缘故，后来发现是webpack配置的问题，由于vue 要对 2.0 和 3.0 做适配，如果不使用vue2的option api，就可以将 __VUE_OPTIONS_API_设置为false，以减少打包体积，但是由于antdesign 团队 option api 和 composition api是混用的，如果设置为true，ant design 将无法正常使用，如下webpack配置

plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false,
        }),
    ],

不知道 antd 团队是否考虑全部使用composition api???

tangjinzhou commented 2 years ago

welcome pr

vueComponent / ant-design-vue