useTemplateRef warning appears after rollup packaging

[bee1an]

Version

3.5.13

Reproduction link

stackblitz.com

Steps to reproduce

When the useTemplateRef argument has the same name as the variable that received it, a console warning appears after using rollup

What is expected?

No warnings

What is actually happening?

[Vue warn] Set operation on key "value" failed: target is readonly.

[KazariEX]

You did not configure the NODE_ENV correctly for the build script.

[yakudik]

Encountered with same warning but in usage of our UI kit.

We have a layout component (VDefaultLayoutHeader) with code

<script lang="ts" setup>
const refHeader = useTemplateRef('refHeader')
</script>

<template>
    <header ref="refHeader" class="v-default-layout-header">
        ...
    </header>
</template>

Library is building without problems, but in project where we use this component console display warning message
[Vue warn] Set operation on key "value" failed: target is readonly

[edison1105]

@yakudik Please provide a minimal reproduction.

[bee1an]

You did not configure the NODE_ENV correctly for the build script.

Thanks for the answer. The same warning happens when I bundle vue as external content, although I set a fixed NODE_ENV, I know it looks weird in this example, but it really needs to be done in my project. Here's the latest example
This is not an issue when the useTemplateRef argument string is different from the variable name that is expected to be returned
like this:

[edison1105]

The render function returned by setup is from the production build. However, the Vue you are using is in DEV mode, so a warning is displayed.

@yakudik
The render function inside the VDefaultLayoutHeader is generated by the production build, but the Vue used in the project is in development mode. This results in a warning during development. However, after the project is built, the warning will no longer appear since everything will use the production version of Vue.

minimal reproduction with playground, the warning will disappear after changing from DEV to PROD.

[bee1an]

@edison1105 Thanks for your answer. I solved my problem.

[yakudik]

@edison1105

It's true, this warning don't be showed in production, but the main problem is that we use templateRefs not only for VDefaultLayoutHeader.

We also have VDataTableTr, for example. This component has two templateRefs (on checkbox and row action)

And this component, as you imagine, generate hundreds and hundreds of wirnings during local development)

[edison1105]

@yakudik

<script lang="ts" setup>
-const refHeader = useTemplateRef('refHeader')
+const headerRef = useTemplateRef('refHeader') // use a diff var name is a workaround
</script>

<template>
    <header ref="refHeader" class="v-default-layout-header">
        ...
    </header>
</template>

[bee1an]

@edison1105 Is this a bug? Or is it my problem?

[edison1105]

@bee1an this is a bug but an edge case.

[bee1an]

@edison1105 Thank you. I look forward to your fixing it

[yakudik]

@yakudik

<script lang="ts" setup> -const refHeader = useTemplateRef('refHeader') +const headerRef = useTemplateRef('refHeader') // use a diff var name is a workaround </script> ...

Yes, and this is my current temporary solution, but i'll of course wait for this problem to be fixed

[char101]

I think the real issue here is that in vue 3.5.13 in development mode, setting a template ref while having a variable with the same in the script setup will try to assign the variable to the template ref. This is inconsistent with what is written in the documentation that this is before 3.5 usage.

Minimum example:

<script setup>
import {onMounted} from 'vue';
let div = null;
onMounted(() => console.log(div)); // div is not null but refers to the div node below
</script>

<template>
  <div ref="div"></div>
</template>

Console warning: Template ref "div" used on a non-ref value. It will not work in the production build.

A possible workaround is to name template ref using invalid identifier characters like #div.

[zhouxianjun]

Hi,

I'm encountering the same issue described in this PR (#13449) after migrating our component library to production builds.

Our situation:
Components using useTemplateRef() work correctly when running in source form (pre-bundling)

After bundling with Vite, we're seeing consistent warnings in development mode:

[Vue warn] Set operation on key "value" failed: target is readonly
This affects dozens of components throughout our library where we've used useTemplateRef()

Due to the scale of usage, it's impractical for us to modify each instance

Observations:
✅ Production builds work correctly (no warnings)
⚠️ Development builds with bundled components trigger warnings
⚠️ Source-form components (unbundled) work in both dev/prod

Could you please share:
The estimated timeline for merging this fix

Which Vue version will include the fix (v3.4.x or later?)

Any recommended workarounds until the fix ships

This is blocking our component library's production rollout. We'd be grateful for any updates on the release plan.

Thank you for your work on this fix!