🐛 BUG: Vue components cannot be nested about astro HOT 20 CLOSED

Just bumping this thread to let everyone know I'm looking at this now. Thanks for being patient with this one!

from astro.

@Igloczek if it's a non-breaking release (not major) then I think a beta is ok.

from astro.

Thanks for checking @Igloczek . I will set up an example later today, but I suspect the issue is actually just my use of <script setup>.

from astro.

Okay, this has been a total rabbit hole. Here are some potentially related issues and commits. I'm suspecting that this is an upstream issue, but I'm not sure how to confirm that suspicion.

vuejs/core#2863

vuejs/core@8c3c14a#diff-561be13280b90fe64842cc767742d3ade26e09edc35b7db1ea221c3a68297e63R830

from astro.

Okay, this has been a total rabbit hole. Here are some potentially related issues and commits. I'm suspecting that this is an upstream issue, but I'm not sure how to confirm that suspicion.

vuejs/vue-next#2863

vuejs/vue-next@8c3c14a#diff-561be13280b90fe64842cc767742d3ade26e09edc35b7db1ea221c3a68297e63R830

The linked repository workes perfectly fine with vue 3.1.2 though, What is your issue with the linked commit, @natemoo-re ?

from astro.

The linked example does work correctly in [email protected]. But even when I upgrade our Vue renderer to 3.1.2, I hit (seemingly) the same issue. The difference in our case is that the components are not all at the top-level of the app, they are recursive.

const B = { template: `<div id="b">B</div>` };
const A = { components: { B }, template: `<div id="a"><B /></div>` };

createApp({
  components: { A },
  render() {
    return h(A, {});
  }
})

from astro.

For more context, I see the following in the console, which is part of the problem that was reported.

[Vue warn]: resolveComponent can only be used in render() or setup().

This workaround was suggested but doesn't work in this case.

from astro.

I do actually have some kind of idea what could cause this. I might be completely wrong, but I'll try this - either late today or early tomorrow.

from astro.

Hey, so basically I am not sure what exactly causes this, but I think that vue might not see the nested component as an actual component (does the astro-fragment element get injected between the two components as well? @natemoo-re )

from astro.

I ran into this issue as well. It seems that any custom element, even non-registered inside of a Vue component's template causes
the [Vue warn]: resolveComponent can only be used in render() or setup(). warning and the fatal error [executing astro] TypeError: Invalid value used as weak map key.

<template>
   <what-ever />
</template>

<script>
export default {}
</script>

<style>
</style>

from astro.

It appears that I can get around this issue by using dynamic components: <component :is="SomeComponent" />

<template>
    <ul>
        <li v-for="post in items" :key="post.url">
            <a :href="post.url">{{ post.title }}</a>
            <component :is="Tags" :items="post.tags" />
        </li>
    </ul>
</template>

<script>
import {shallowRef} from '@vue/reactivity';
import Tags from './Tags.vue';
export default {
    data() {
        return {
            Tags: shallowRef(Tags),      
        }
    },
    props: {
        items: {
            type: Array,
            default: () => new Array()
        }
    }
}
</script>

<style>

</style>

Edit: Added shallowRef wrapper as per Vue's suggestion.

from astro.

Fixed in #858

from astro.

Reopening as we had to revert the change because it was causing issues with client-side Vue. #913

from astro.

I get to the point it actually works, this time on both server and client side.

On Astro side I removed this https://github.com/snowpackjs/astro/blob/main/packages/astro/src/external.ts#L21 to let @vue/server-renderer be not taken as external source, and be part of the Snowpack cache.

On Vue side, I made a ESM version of @vue/server-renderer , so we need to wait till this be accepted and package released.

from astro.

Vue stuff merged, we just need to wait for release.

@matthewp do we need to wait for a stable release, or beta will be fine?

from astro.

Ok think it's fixed for real this time! In #924

from astro.

Hi, I am currently getting this issue. I am on Astro 0.20.12. Any nested Vue components produces a 500 error during build:

[executing astro] TypeError: Invalid value used as weak map key

from astro.

@qjack001 check #1512 thats the Vue changes that landed in v0.20.12, and can break that stuff

from astro.

But... I just checked it in my demo project created for testing this issue, and after upgrading to 0.20.12 everything still works fine. Could you maybe create some reproducible demo?

from astro.

I was able to confirm that the culprit is <script setup>. There is already an issue open (#1190), so no example needed. Thanks again.

from astro.