N
Nuxt•2mo ago
hartbit

[Vue warn]: Property "buttonClass" was accessed during render but is not defined on instance.

I'm trying to build a component library in TypeScript and Composition API in a mono-repo using https://github.com/nuxt/module-builder. When I build the component library using "watch-mode", nuxt-module-build build --stub, and use my components in another package of the mono-repo, everything works fine. But when I try to build the component library using nuxt-module-build build, I get [Vue warn]: Property "buttonClass" was accessed during render but is not defined on instance. when the components attempt to access functions defined in <script setup>. Any ideas how to pin down the issue ?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @hartbit. 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 knowledge sources provided, I can offer some insights into your issue with the Vue warning about accessing properties during render that are not defined on the instance. This problem seems to be related to how props and reactivity are handled in Vue 3 and Nuxt 3. The warning you're seeing typically occurs when you're trying to access a property that Vue doesn't recognize as part of the component's state. This can happen due to a few reasons: 1. Destructuring props: As mentioned in the Stack Overflow post, destructuring props can cause values to lose their reactivity. Instead of destructuring, you should access props using props.propName in the setup() function, this.propName outside the setup function, or just propName in the template. 2. Incorrect prop definition: Make sure you're defining your props correctly. The Stack Overflow post shows an example of how to properly define props using defineComponent: 
   import {defineComponent} from "vue"

   export default defineComponent({
        props: {
           id: Number,
           date: Date,
           title: String,
           text: String
       }
   })
   
   import {defineComponent} from "vue"

   export default defineComponent({
        props: {
           id: Number,
           date: Date,
           title: String,
           text: String
       }
   })
3. Using aliases: There's an issue mentioned in a GitHub issue about using aliases when importing types and extending from them. This can cause problems with type inference when using remote layer sources. If you're using aliases in your imports, try using relative paths instead. 4. Module detection: A GitHub pull request mentions an issue with TypeScript treating script setup components as scripts instead of modules, which can cause problems with variable scoping. The solution proposed was to set the TypeScript moduleDetection to "force" in the tsconfig.json file. To pin down the issue, you could try the following: 1. Check your prop definitions and make sure they're correctly typed and defined. 2. Avoid destructuring props in your setup() function. 3. If you're using aliases for imports, try switching to relative paths. 4. Check your tsconfig.json and consider setting "moduleDetection": "force" if it's not already set. 5. Make sure you're not accidentally declaring global variables in your components. If none of these solve the issue, it might be related to how the module builder is processing your components. You might want to compare the built output when using --stub versus the regular build to see if there are any significant differences in how the components are being compiled. Remember, the warning doesn't necessarily mean your code won't work, but it's indicating that Vue can't properly track the reactivity of the property in question. This could lead to unexpected behavior in your components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@647161656190697473> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?