can't get template ref when use dynamic component

[coader]

Version

3.2.21

Reproduction link

sfc.vuejs.org/

Steps to reproduce

click and will call child component's method

What is expected?

get dynamic instance with template ref

What is actually happening?

template ref return unexpected value:
comRef.value.test is not a function

[edison1105]

see https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

demo

[languanghao]

@edison1105 I also find this problem in 'product' mode, but everything works fine in 'dev' mode.

From chrome F12, we can find rv.value has different value

product mode, need call rv.value._.exposed.handleConfirm()

dev mode, just call rv.value.handleConfirm()

[edison1105]

@languanghao I will check it later.

[edison1105]

@languanghao
I have done a test and it works fine in a production environment. Could you provide a demo with the problem?

[languanghao]

@edison1105
I try to write a samll demo to reproduce but failed. Maybe I can send you my product url ? Please tell me your email.

PS: 看地区你也是中国的，用中文交流可以吗？

[edison1105]

@languanghao
[email protected]

[languanghao]

@edison1105 I can reproduce the bug.

When the dyanmic component ref to a component with top level await, the ref will get incorrect value.

Maybe the bug is here

const refValue = vnode.shapeFlag & 4
  /* STATEFUL_COMPONENT */
  ? getExposeProxy(vnode.component) || vnode.component.proxy : vnode.el;

When a component with top level await, getExposeProxy will return undefined

demo: https://github.com/languanghao/dymaic-ref

[edison1105]

@languanghao thanks for your demo and I made a online demo
should be a bug.

[edison1105]

@languanghao there is a workaround, see #4930 (comment)

[languanghao]

@edison1105 thank you, I will try it.

[WormGirl]

see https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

demo

this demo at develepment env with options api can get ref, just at setup not work, but at production all work fine. why?

 "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "@vueuse/core": "^7.4.1",
    "ant-design-vue": "^3.0.0-alpha.12",
    "axios": "^0.24.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.26",
    "vue-clipboard3": "^1.0.1",
    "vue-i18n": "^9.1.9",
    "vue-router": "4",
    "vue-shadow-dom": "^3.0.1",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "~5.0.1",
    "@vue/cli-plugin-eslint": "~5.0.1",
    "@vue/cli-plugin-typescript": "~5.0.1",
    "@vue/cli-plugin-unit-jest": "~5.0.1",
    "@vue/cli-service": "~5.0.1",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.1.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "patch-package": "^6.4.7",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5"
  }