toRefs() error since update
Hello Kapa (or others ^^)
I have this error since I ncu -u my project :
I don't use
toRefs(), couldn't find any occurencies with a research. So I bet on the ncu -u.
Here is my package.json :
Any idea why ?5 Replies
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error message:
typically means that somewhere in your code (or a dependency),
toRefs() is being called on a plain object instead of a reactive one. Even if you don't directly use toRefs(), it could be used in a composable, a third-party module, or a dependency that was updated during your ncu -u upgrade.
This issue is commonly seen after upgrading Nuxt or related dependencies, as stricter checks or breaking changes may have been introduced in the reactivity system. For example, in Vue 3 and Nuxt 3, toRefs() should only be used on objects returned by reactive() or similar APIs, not on plain objects or props directly.
Relevant context from the knowledge sources:
- A similar error is discussed in the context of using toRefs() on props or plain objects, which leads to loss of reactivity or errors. The solution is to ensure you only use toRefs() on reactive objects, such as those created by reactive() or returned from defineProps() in <script setup>. For example, you can do:
or, if you want to make a reactive copy:
This ensures reactivity is preserved and avoids the error you are seeing if the object is not reactive to begin with How to pass a reactive object with prop values from a component to a composable in vue3 / nuxt3, Vue3 / Nuxt3 - how to use props directly in setup.
- If you recently upgraded Nuxt or related packages, breaking changes in the reactivity system or stricter type checks could be the cause. Double-check any composables or modules that might use toRefs() internally, especially if they expect a reactive object but now receive a plain one after the upgrade.
What you can do:
1. Search your codebase (including node_modules if possible) for toRefs() usage.
2. Check any custom composables or third-party modules that may have changed after the upgrade.
3. If you find a usage of toRefs() on a plain object, refactor it to ensure the object is reactive (e.g., wrap it with reactive() if appropriate).
4. If the issue is in a third-party module, check if there's an update or open issue addressing this compatibility.
If you need more specific help, try to identify which file or module the error is coming from (the stack trace should help). If it's from a dependency, you may need to wait for an upstream fix or temporarily pin to an earlier version.
Let me know if you can provide a stack trace or more context, and I can help you narrow it down further!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai I have no usage of toRefs
Can you tell from my package.json if there is any version issue causing this warning ?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources provided, there is no explicit mention of the toRefs() error being caused by a specific version in your package.json. The sources do discuss various issues related to Nuxt 3.17.x releases, such as problems with stylesheets, fonts, and some module incompatibilities, but none directly reference a toRefs() error or a breaking change in Vue or Nuxt that would cause this error after upgrading dependencies in the way you describe.
The knowledge sources do not contain enough information to definitively identify a version in your package.json as the cause of the toRefs() warning. If the error persists and you suspect it is related to a recent upgrade, you may want to check the changelogs of your dependencies or try reverting to previous versions incrementally to isolate the cause. If you can provide a stack trace or more context about where the error is thrown, it may help narrow down the issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.