Component inside <ClientOnly> is not rendered

huynhtehoa commented 6 months ago

Hi, first of all, thank you for the great module.

I'm new to both Nuxt and Sanity so I'm unsure if this is a bug or I am doing something wrong as I cannot find any documentation as well as related reports for this issue.

Problem

I am facing a problem where component inside <ClientOnly> tag (or cmp.client.vue) is not rendered at all when using Sanity query.

The error message from the console is:

If I remove any of the Sanity composables (useSanityQuery or useLazySanityQuery), the client component will be rendered normally

Workaround

A workaround (or intended feature) I found is to enable minimal: true for Sanity inside nuxt.config.ts

Reproduction

You can clone these apps to test. But they are entirely fresh so any inited apps will do.

Nuxt: https://github.com/huynhtehoa/sanity-nuxt-test
Sanity: https://github.com/huynhtehoa/test-sanity

Note: I tried to reproduce on StackBlitz here but the issue does not occur. The only difference is I'm using pnpm for local development whereas StackBlitz uses npm (and its other env)

System

OS: WSL 2 Ubuntu 20.04
Node: 18.20.0
pnpm: 8.15.5
Nuxt: 3.11.1
@nuxtjs/sanity: 1.10.1

felix-dolderer commented 1 month ago

@huynhtehoa Can you check if the issue still comes up for you?

I tried reproducing the issue by initializing a new nuxt project and a new sanity project. Data loads and component is shown as expected and I even tried various scenarios for using useSanityQuery that I experienced may lead to different behaviour for other issues.

[x] useSanityQuery in app.vue with a plain <ClientOnly> component (your setup on stackblitz)
[x] useSanityQuery in the <ClientOnly> component, and having the component, directly in app.vue
[x] useSanityQuery in a pages-route with a plain <ClientOnly> component directly calling the page
[x] useSanityQuery in a pages-route with a plain <ClientOnly> component, using client-side navigation to open the page
[x] useSanityQuery in the <ClientOnly> component itself, and having the component in a pages-route, directly calling the page
[x] useSanityQuery in the <ClientOnly> component itself, and having the component in a pages-route, using client-side navigation to open the page

All of them worked locally as well as on stackblitz.

huynhtehoa commented 1 month ago

Thanks for checking @felix-dolderer. I just inited a new project and everything is working as expected now

nuxt-modules / sanity