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