prismic: Preview error on nuxt 3 SSR using v3 module

Hello there, I’m having issues with the preview on nuxt 3 & @nuxtjs/prismic v3.

I configured the preview in prismic as such:

Domain: http://localhost:3000 Link resolver: /preview

When launching the preview, the server throws a 500 error, useHead is not defined.

I also deployed & configured it on Netlify, and I’m getting the same error in a live environment.

I also tried my luck making a custom preview file pages/preview.vue but I’m getting the same exact error.

Versions

nuxt: 3.0.0-rc.4
@nuxtjs/prismic: 3.0.0-alpha.5
node: 16.14.2

Additional Details

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
import svgLoader from 'vite-svg-loader'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  buildModules: [
    '@pinia/nuxt',
    '@vueuse/nuxt',
    '@intlify/nuxt3',
  ],
  
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/prismic',
  ],

  prismic: {
    endpoint: 'xxxx',
  },

  intlify: {
    localeDir: 'locales',
    vueI18n: {
      locale: 'en-gb',
      fallbackLocale: 'en-gb',
    }
  },

  components: {
    dirs: [
      { path: '~/components', global: false},
      { path: '~/slices', global: false },
    ],
  },

  runtimeConfig: {
    public: {
    }
  },

  vite: {
    plugins: [
      svgLoader(),
    ]
  }
})

nuxt dev console

  [Vue warn]: Unhandled error during execution of setup function 
    at <Preview onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/preview" >
  [nuxt] [request error] useHead is not defined
    at setup (./.nuxt/dist/server/server.mjs:22715:1)  
    at _sfc_main.setup (./.nuxt/dist/server/server.mjs:22755:23)

.nuxt/dist/server/server.mjs

const _sfc_main = {
  __name: 'preview',
  setup(__props, { expose }) {
  expose();

useHead({ // <---- Error thrown here
	title: 'Prismic Preview - Loading'
})

// TODO: refactor into simple hook
const { client, options: { linkResolver } } = usePrismic()
const { push } = useRouter()
__vite_ssr_import_0__.onMounted(async () => {
	const redirectURL = await client.resolvePreviewURL({
		linkResolver,
		defaultURL: '/'
	})

	push(redirectURL ?? '/')
})

Steps to reproduce

Install and configure @nuxtjs/prismic in nuxt.config.ts
Setup preview on prismic
Click the preview icon in UI
Error useHead is not defined shows up

What is Expected?

Preview working properly

What is actually happening?

Error 500 useHead is not defined

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 15

Most upvoted comments

Alright, 3.0.0-alpha.10 should be the one 🙏

Edit: Just tried with the production package, works as expected 👌

lihbr on Jul 1, 2022

Thanks for the follow up and the commits 🙏🙏🙏🙏

And also a big thank you for this article: https://lihbr.com/blog/pushing-nuxt-js-static-generation-one-step-further At the time, this approach provided excellent performance

renardsas on Jul 1, 2022

Actually, nevermind, I felt inspired tonight so I released 3.0.0-alpha.8 which should bring you full preview support 🎉

There might be some gotchas left, especially with SSR, so let me know if you encounter anything unexpected, but previews are here for real 🙌

Champagne gif

If that’s OK with you I’m closing this issue as I think the initial issue has been answered ☺️

lihbr on Jul 1, 2022

Great catch, thank you so much! TypeScript got me wrong here between Nuxt 3 & Nuxt 2 types, my bad 🤦‍♀️

Just released this fix as part of 3.0.0-alpha.7, there are still some gotchas with previews through due to the lack of preview mode in Nuxt 3. This can be worked around however with some tricks so I’ll implement that in July ☺️ (basically we want to call refreshNuxtData on page load if the user is in a Prismic preview session, this will be implemented with the module through a client plugin~)

Thank you so much for trying Nuxt 3 and the new Prismic module ❤️

lihbr on Jul 1, 2022

Sure, will add that to my backlog ☺️ Great ideas!

If you’d like to contribute further PRs are very welcome too ☺️

lihbr on Jul 1, 2022

Small improvement: Capture

// Current
nuxt.options.app.head.script.push({
   src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`
})

// Add defer and async to script
nuxt.options.app.head.script.push({
   src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
   defer: true,
   async: true
})

Maybe also a way to activate the preview but without loading the script ?

prismic: {
    preview: {
        url: '/preview',
        script : false
  }

I load it only when a certain cookie is present. I do this because otherwise all users logged in or not have to download the script + ifram + source font pro … Capture

renardsas on Jul 1, 2022

~~Of course, thankfully releases are free, should be good in 3.0.0-alpha.9~~ Thanks for the heads up again 🙏

~~Hold on, I forgot one 🤦‍♀️ Getting too late for me.~~

If you’re curious about what it was, basically auto imports don’t work (yet) in modules (oddly they work in the module playground or with yarn link, but not once shipped as a package), so while they are typed as “here” we have to import them still ^^

lihbr on Jul 1, 2022

Nice job! 💪 Thanks for the quick fix. The original error for this issue is gone.

Now the preview currently redirects to the correct page, but the content does not update. I’m not getting the prismic toolbar either while previewing.

I’m guessing that’s normal if this feature is not done yet?

eveningforgery on Jun 28, 2022

~~OK, question: In development (outside of previews), are you able to go to /preview without any error?~~

Edit: Alright, I think I managed to pinpoint the issue, working on it 😃

lihbr on Jun 28, 2022