Skip to content

[TypeScript] Imported refs can't be used as template refs in development #7567

Closed
@ferferga

Description

@ferferga

Vue version

3.2.39 (but also reproducible in latest as the time of writing, 3.2.45)

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNp9UctOwzAQ/JWVL2mlxJboiZBW5YDEAS6Ioy8h2baB+CF7kyJV+XfspGpDkTjuzM7Menxij9byvkOWs8JXrrEEHqmzG6kbZY0jOAG2qFDTG+5ggJ0zChIuCD1x8onUhZiEQRIGQmXbkjBMAEXd9OBwt5bsaiIZiMAWweK8ylI2hWWqtPzTGx3OOUUDeSa8ZDmMSMTCvXGW7EBkfS5Ep+3XnldGiW3ghOs0NQqz2qjtit/x1b2oG09znKNX2YczR48uJEqWzsxFAHt0mUNdo0P3b9jN7q/AG+5PaMwcpB5CAec+w8MvvYfiUjiWVB0uvYfA5CH2jN/jUmW0p/kHraOqeH5/fXmawM1iOQpGn8V1M4XFEtabqdRoY1rkrdkvkplbX7YdQnUo9R7rPElnSXzkovewZMMP/SnKPA==

Steps to reproduce

Open the browser's console. In every step, check how the message elementRef value changed from the watcher in test.ts is displayed

  • Change between production and development. You will see that it works as expected and the message is still displayed when reloading the page
  • Add lang="ts" to the <script setup> tag.
  • Change between dev and production. Production works without any problem, but development doesn't.

The same behaviour is reproducible across both mentioned Vue versions.

What is expected?

Refs imported from other modules should be binded to template refs

What is actually happening?

The ref is not binded to the template one in development when using lang=ts.

System Info

No response

Any additional comments?

As @jacekkarczmarczyk pointed out:

Without lang it generates:
const __returned__ = { get elementRef() { return elementRef } }

With lang:
const __returned__ = { }

Full Discord discussion starts here

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions