Nuxt 3 for loop not rendering in production

[EmilyFlocc]

Environment

• Operating System: Darwin
• Node Version: v14.18.3
• Nuxt Version: 3.0.0-rc.8
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: publicRuntimeConfig, app, css, vite, components, buildModules, modules, build, nitro, hooks, strapi
• Runtime Modules: -
• Build Modules: @nuxtjs/tailwindcss@5.3.2, @nuxtjs/netlify-files@1.2.0, @nuxtjs/strapi@1.5.0, @pinia/nuxt@0.4.0, @flocc-glamp/glampinn@0.0.3 // this is my private package that contains the components I am passing data to

Reproduction

A simplified example here:
Package: https://github.com/EmilyFlocc/my-module
Nuxt: https://github.com/EmilyFlocc/playground

If you pull down and use yarn link to insert the package into the playground repo, then run yarn generate and yarn preview within playground, you will not see the for loop data, even though the {{posts}} shows it. However if you run yarn dev then it will show.

Describe the bug

When passing any array as a prop to a component that is either fetched, retrieved from the store or not set until any point after beforeMount in the lifecycle, then a v-for within my private package does not render the data. When the components are not in a packaged module they work fine.

Additional context

I believe this is related to vuejs/core#5525 but none of these solutions work for me. This is definitely a specific nuxt 3/vue 3 bug as I have separate nuxt 2 packages and projects set up in the same way that work perfectly.

Logs

No errors show up in the logss

[danielroe]

This is a consequence of having two separate vue instances (one in each project's node_modules). Likely only an issue when linking rather than when installed.

Good news though - we merged nuxt/framework#6735 which resolves it. You can try on the edge channel.

[EmilyFlocc]

Hi @danielroe thanks for the quick response, I think thats worked!

Do you know how I can import composables here too? I tried this.nuxt.hook('autoImports:dirs', (dirs) => {dirs.push(join(__dirname, 'composables'))}) but it doesn't seem to register them?

[danielroe]

Given your example, I think you would be very interested in extends: see #13367 and https://v3.nuxtjs.org/examples/advanced/config-extends.

I would think the composables line of code you've quoted would work. (So maybe the issue is somewhere else? You could try to call autoImports:extend or look in .nuxt/types/auto-imports.d.ts to see what the actual registered auto-imports are.)

There are both addAutoImport and addAutoImportDir helper methods from @nuxt/kit that might help too.