Nuxt•2mo ago

Template ref "refName" used on a non-ref value. It will not work in the production build.

I'm seeing messages like this in the console. Template ref "shippingForm" used on a non-ref value. It will not work in the production build. What does it mean? As far as I can tell I'm following the docs instructions for adding template refs so I'm not sure what will not work in production? Example, <Shipping ref="shippingForm" />

type ShippingFormType = InstanceType<typeof Shipping>

const shippingFormRef = useTemplateRef<ShippingFormType>('shippingForm')

type ShippingFormType = InstanceType<typeof Shipping>

const shippingFormRef = useTemplateRef<ShippingFormType>('shippingForm')

What am I missing? Might add that I'm using this together with defineExpose from the Shipping component

5 Replies

kapa.ai•2mo ago

Hi @Jox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to directly address your issue with template refs in Nuxt. However, I can provide some general insights about template refs in Vue 3 and Nuxt 3 that might be helpful. In Vue 3 and Nuxt 3, when using the Composition API with <script setup>, template refs should be declared using ref() and then accessed in the template. The warning you're seeing suggests that the ref is not properly defined or is being used on a non-ref value. Here's an example of how to correctly use template refs in Vue 3/Nuxt 3:

<script setup>
import { ref } from 'vue'

const shippingForm = ref(null)

// You can now use shippingForm.value to access the component instance
</script>

<template>
  <Shipping ref="shippingForm" />
</template>

<script setup>
import { ref } from 'vue'

const shippingForm = ref(null)

// You can now use shippingForm.value to access the component instance
</script>

<template>
  <Shipping ref="shippingForm" />
</template>

It's important to note that when using refs on components, you need to expose the methods or properties you want to access using defineExpose() in the child component. This is mentioned in the Nuxt documentation for <NuxtPage> (https://nuxt.com/docs/api/components/nuxt-page):

<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

The useTemplateRef function you're using isn't a standard Vue or Nuxt function, so it's possible that it's causing issues. Instead, you might want to use the standard ref approach. If you're still encountering issues after adjusting your code to follow these patterns, it might be worth checking if there are any specific Nuxt configurations or plugins that could be affecting how refs are handled in your project. Remember, without seeing more of your code or understanding the full context of your Nuxt setup, it's difficult to pinpoint the exact cause of the warning. If the problem persists, you might want to create a minimal reproduction of the issue and seek help on the Nuxt GitHub repository or community forums. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@525765413322227742> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Ragura•2mo ago

Haven't seen that issue before, but with it probably being a Vue issue and not Nuxt you might want to repost this on the Vue Discord channel too.

Cake•2mo ago

looks like u have another variable called shippingForm so

const shippingForm = ref({...})
const formRef = useTemplateRef('shippingForm')

<form ref="shippingForm" />

const shippingForm = ref({...})
const formRef = useTemplateRef('shippingForm')

<form ref="shippingForm" />

will cause that error

JoxOP•2mo ago

You know what, that's actually the case 🤦🏻‍♂️ There's some temporary logging variables with the same name. That's why I hadn't seen this issue before 😅 Thanks @Cake for making me look a little extra for that 🙂

Gaming

Programming

Template ref "refName" used on a non-ref value. It will not work in the production build.