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

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.

https://user-images.githubusercontent.com/36191462/201318983-2c372f2e-8b09-434c-9264-8afa7e2dd753.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.

[danielroe]

Excellent - glad that is resolved 👍

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

[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.