Prismic client from usePrismic() undefined only on client-side in dev-mode

[Niklas Wolf]

I've run into a really strange behaviour: if I start the dev-mode of my project with npm run dev, the client from usePrismic() is undefined, therefore no content can be fetched on the client side. On the initial request with SSR it works on the server side, but as soon as I start to navigate on the client side it is undefined...
When I build the project and run it npm run build && npm run preview it also works on the client side...

Versions

• nuxt: 3.1.1
• @nuxtjs/prismic: 3.0.0-rc.2
• node: v18.13.0

Reproduction

I unfortunately can not say how to reproduce this, it is a really strange issue.

What is Expected?

Dev-Mode behaves like Prod-Mode on the client side.

[Lucie]

Hey there, can you try to provide a minimal reproduction?

If you're unsure, try trimming down your project to the minimum and provide information on how you manage to experience the issue. This can also help: https://nuxt.com/docs/community/reporting-bugs#create-a-minimal-reproduction

[Lucie]

OK, actually I think I know where this is coming from.

Can you try to refactor your code so that usePrismic() is used top level in your component? (I assume you're seeing a warning right now about inject not being available)

const { client } = usePrismic();

const clientSideHandler = () => client.getByUID();

I'll try to think of a way to patch this so that usePrismic() can be used everywhere~

---

For reference for my later self: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts#L11-L20

[Niklas Wolf]

I use it top-level in my component(s) like so:

<script setup lang="ts">
import { PrismicDocument } from '@prismicio/types'

const { client, predicate } = usePrismic()
const route = useRoute()

const { data } = await useAsyncData(route.fullPath, async () => {
    const result = await client.get({
      predicates: [predicate.at('document.type', 'season_highlight')],
      orderings: {
        field: 'my.season_highlight.publication_date',
        direction: 'desc',
      },
    })

    return result.results
})
</script>

If I log client it gives me undefined only on the client side, but is populated on the server-side

[Lucie]

Alright, can you provide a minimal reproduction then? This reads off.

[Daniel Philip Johnson]

I am able to replicate as well as a temp fix.

Current setup

---

• Operating System: Darwin
• Node Version: v16.18.1
• Nuxt Version: 3.2.3
• Nitro Version: 2.4.1
• Package Manager: npm@8.0.0
• Builder: vite
• User Config: ssr, typescript, build, runtimeConfig, generate, components, css, image, prismic, bugsnag, modules, sitemap, app, nitro
• Runtime Modules: nuxt-jsonld@2.0.7, nuxt-bugsnag@5.9.0, @nuxtjs/tailwindcss@6.1.3, @pinia/nuxt@0.4.5, @nuxtjs/prismic@3.0.0-rc.2, @nuxt/image-edge@1.0.0-27809804.194d2d6, @funken-studio/sitemap-nuxt-3@4.0.4, @nuxtjs/robots@3.0.0, @dargmuesli/nuxt-cookie-control@5.2.1
• Build Modules: -

---

Replicate issue

Step 1 run
nuxi clean

Step 2 run dev
npm run dev
This is where the prismic client seems to become undefined after clean has been run.

The fix

Just re run npm run devand it will rebuild prismic.

With similar code it should be possible to replicate. Just two documents for page and switch between them.

const { client } = usePrismic()
const { data: seo } = await useAsyncData(() => client.getByUID('page_seo', 'home'))

I will follow up with a video of me reproducing it elsewhere as its a production project 😸 i'm afraid.

[Lucie]

Hey Daniel, thank you so much for providing another example! I tried to reproduce it without luck however using both Nuxt 3.2.3 and 3.5.1 :/

This issue is quite weird 🤔 Will try to discuss it with the team.

[Lucie]

Hey there, I finally managed to reproduce the issue on one of our starters. I think I've found a fix, it's available in rc.9

Let me know if this works for you @danielphilipjohnson / @niklaswolf!

[Lucie]

Closing this one for now, happy to reopen if it anyone's still having trouble 🤔

Thanks everyone for contributing!