Closed manish-butterpaper closed 2 years ago
Hi there!
Seems like it's a Vue usage problem, the warning you are getting is hinting:
A component with async setup() must be nested in a
in order to be rendered.
The only reason you can async setup outside islands, is that for convenience, รฎles wraps the entire app in Suspense
, but that's no longer the case once the site is built.
Since each island will be its own independent app, it won't have a wrapping Suspense
, so you shouldn't use await res.json()
in script setup
of an island component.
If you need it, you could explicitly add Suspense
inside the island, wrapping another component which is async.
Feel free to reopen it if it's something else.
@ElMassimo got it working with your suggestions! Thanks. Off topic but another thing I wanted to ask was regarding authentication. I understand the output of build is complete SSG, but Astro also gives the options to configure server side configs like cookie reads etc.
Can we get a deeper integration with Vercel where we can use their Edge functions for authentication/SSR/ISR and other advanced use cases?
At the moment รฎles only targets SSG.
I have considered adding support for SSR at some point, but at the moment I don't have a need for it, and Nuxt 3 is already a great option if you need that.
I evaluated Nuxt but then we loose the partial hydration/islands based architecture. The entire shift towards Astro/Iles is because of 0 JS ship feature. Isn't it?
iles
andvite
.Description ๐
Whenever a hydration directive is used for a component within a "page", the component gets perfectly rendered and server side rendered, but as soon as the component is hydrated, the DOM element goes blank.
We keep getting following error in console:
Reproduction ๐
The root index.vue page has as following component:
And the counter.vue component is simple as well:
Interestingly, if the above counter component is nested within another component which was
client:visible
hydrated, the SSR and client side hydration both works.Default dependencies used
_Run `npx iles info` and `pnpm list` (or `npm list`) and provide the output:_ `npx iles info` ``` iles v0.8.2 vite v3.0.3 ``` `pnpm list` ``` dependencies: @headlessui/vue 1.6.7 @iconify/vue 3.2.1 @nanostores/vue 0.5.5 @rollup/plugin-graphql 1.1.0 animejs 3.2.1 cross-fetch 3.1.5 graphql 16.5.0 graphql-ws 5.9.1 nanostores 0.5.12 vite-plugin-windicss 1.8.7 devDependencies: iles 0.8.2 typescript 4.7.4 vue-tsc 0.38.9 ```Logs ๐
If not providing a reproduction:
Output
_Run `DEBUG=iles:* npm run dev` or `DEBUG=iles:* npm run build` and provide the output:_ ``` ```Screenshots ๐ท
Provide console or browser screenshots of the problem.