Nuxt 3 fails to run fetch or render any components on client side – only works on full page refresh on server

[toddpadwick]

Environment

• Operating System: Darwin
• Node Version: v14.19.0
• Nuxt Version: 3.0.0-rc.13
• Nitro Version: 0.6.1
• Package Manager: npm@6.14.16
• Builder: vite
• User Config: modules, sanity, privateRuntimeConfig, publicRuntimeConfig, target, image, css, vite, alias
• Runtime Modules: @nuxtjs/sanity@1.4.1, nuxt-jsonld@2.0.6, @pinia/nuxt@0.4.3, @nuxt/image-edge@1.0.0-27769790.4b27db3
• Build Modules: -

Reproduction

As the fetch requires a token to Sanity API, which I am unable to make public, I'm not sure how I can provide a reproduction of this? Happy to give access privately in some way? Please advise

Describe the bug

content renders fine and fetch queries all work on server side, on full page refresh. But on client side page changes, nothing loads and there is no errors in the console or terminal.

Here is a screen recording.

client-side-refresh-doesnt-work.mp4

Possibly related to this bug which multiple users have reported, and which does have a reproduction available.

Additional context

Here is an example of one of my queries:

<template>
  <div>
    <loading v-if="pending"/>
    <template v-else-if="entry">
     <hero-builder :entry="entry"/>
     <builder-landing-page :entry="entry"/>
    </template>
  </div>
</template>


<script setup>
  import {entryMeta} from '~/helpers';
  import groqQuery from '~/queries/groq/home-page';
  const config = useRuntimeConfig();
  const route = useRoute();
  const query = groqQuery();

  const { pending, data:entry, error } = useSanityQuery(query);
  console.log({pending: pending.value, error:error.value, entry:entry.value});
  if (error && error.value) {
    throw createError({statusCode:500})
  } else if (entry) {
    const meta = entryMeta(entry.value);
    useHead({
      title:entry.value?.meta?.title,
      meta: meta,
      link: [
        {rel:'canonical',href:'/'}
      ]
    })
   } else {
      console.error('Unknown error occured')
    }
</script>
  

and here is my nuxt.config:

export default defineNuxtConfig({
	modules: ["@nuxtjs/sanity",'nuxt-jsonld','@pinia/nuxt','@nuxt/image-edge'],
	sanity: {
		projectId: "say5yn59",
		apiVersion: '2022-10-14',
		useCdn:false,
		dataset:process.env.SANITY_DATASET
	},
	privateRuntimeConfig: {
		sanity: {
			token: process.env.SANITY_TOKEN,
		},
	},
	publicRuntimeConfig:{
		siteName:'Cool Planet',
		baseUrl:process.env.BASE_URL
	},
	target: 'static',
	image: {
  		// Options
  		sanity: {
			projectId: 'say5yn59',
			dataset: 'production'
		},
  		screens:{
  			xxs:320,
			xs: 359,
			sm: 640,
			md:768,
			lg: 1024,
			xl: 1280,
			xxl:1536,
			xxxl:1920,
			quadHd:2400,
			'4k':3700,
  		}
	},
	css:[
		"@/assets/scss/main.scss"
	],
	vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/scss/tools.scss" as *;'
                },
            },
        },
    },
    alias: {
        "@app": "/@app"
    }
})

Logs

No logs are available.

[denisasJersovas]

I just have a guess but looking at your query file you have 3 script tags, and one is in the middle closing the first one, but it just a guess, I am still not in the pages development just made navigation for my project, but everything is fetched correctly al least now :) will check later after applying pages to project :)

[toddpadwick]

Hi @denisasJersovas ah, wish it was something as simple as that haha! but unfortunately, that was a mistake down to me copying and pasting into github issue twice – it's not actually in my codebase. I have updated the description now.

[denisasJersovas]

have you tried to watch route changes and make a request again ? :) I am new for vue/nuxt this is my guesses. :)

[toddpadwick]

@denisasJersovas no but it should be automatic. Nuxt 2 handled this out of the box so don't want to duplicate functionality that is supposed to be happening naturally.

[TheAlexLichter]

Does that happen from any site you go back to your main one?
Asking because you have an hydration mismatch in your console (happens after hard reloading certain sites with invalid HTML or different server/client state) which could lead to malfunctions.

I'd suggest to copy your project and try to boil it down to a minimal repo, that is ideally also available without Sanity or with a demo Sanity key.

If it is only related to Sanity, it could be an issue with the module and composable but it is hard to guess from here.

[toddpadwick]

Hey @manniL I noticed that, and am trying to address those (but very hard to debug hydration errors). However, I don't think they are related as, unfortunately, it happens on all pages, many of which don't have any hydration issues.

I am pretty sure, as you say, it is down to the fetch queries, but as the sanity component is just a basic wrapper for async fetch, could still be a nuxt thing. All the content that is not fetched renders – so the header and footer. it is only API content that doesn't show (everything other than header and footer).

I have done more digging and in some cases I am seeing these cors errors – however, that doesn't make any sense considering the server is querying the APIs just fine and in dev mode client and server are from the same place. I have tested the CORS response for these APIs and they acccept.

Do you think this issue is a Nuxt/Sanity issue?

[danielroe]

I do not believe this is an issue with the sanity module.

1. You need to add your Nuxt site to Sanity's allowed origins: https://www.sanity.io/docs/cors; the last screenshot shows CORS headers for your site are not added.

2. If you are not providing your token to the client (but your site is making client-side requests, e.g. if you do not have payload extraction enabled) then this will also fail. I mention this only as you say you are not happy to share the token in this reproduction.

If neither of those solve the issue, please feel free to share access to a minimal reproduction + your token separately either via email, github invite or discord.

[toddpadwick]

Hi @danielroe , thank you for your help. I realised what I have done wrong. I had added the origins to Sanity CORS, however, what I hadn't realised was that I had added **https://**localhost:0000 rather than **HTTP://**localhost:0000. Silly mistake so this can be closed. although, what is confusing, is why it was working fine on server side? with the wrong cors it should have failed entirely I would have expected.

[danielroe]

Excellent - glad that is resolved 👍

CORS is only relevant for browsers. Node/server ignores CORS headers entirely.