usePrismic is undefined when deploying on Netlify

Versions

• @nuxtjs/prismic: 3.0.0-alpha-1

Issue

Publishing on Netlify with minimal config I’m getting this:

Cannot destructure property ‘client’ of ‘usePrismic(…)’ as it is undefined.

My package.json build script looks like this

"build": "nuxi build",

And my nuxt.config.ts looks like this:

  modules: [
    '@nuxtjs/prismic',
  ],
  
  prismic: {
    endpoint: 'xxxxx',
  },

---

UPDATE

Even after creating my own composable and using it like this:

import { createPrismic } from "@prismicio/vue"

export const usePrismicApp = () => {
  const client = createPrismic({
    endpoint: 'xxxx',
    injectComponents: false // Handled at module level
  })

  return client
}

I get a similar error

Cannot destructure property 'options' of 'usePrismic(...)' as it is undefined.

Server logs on Netlify looks like this:

Mar 17, 06:15:39 PM: 31273aba WARN   [Vue warn]: inject() can only be used inside setup() or functional components.
Mar 17, 06:15:39 PM: 31273aba ERROR  TypeError: Cannot destructure property 'options' of 'usePrismic(...)' as it is undefined.
    at setup (/var/task/.netlify/functions-internal/server/server.js:75594:17)
    at callWithErrorHandling (/var/task/.netlify/functions-internal/server/server.js:17186:24)
    at setupStatefulComponent (/var/task/.netlify/functions-internal/server/server.js:21400:31)
    at setupComponent2 (/var/task/.netlify/functions-internal/server/server.js:21387:42)
    at renderComponentVNode (/var/task/.netlify/functions-internal/server/server.js:16008:15)
    at Object.ssrRenderComponent (/var/task/.netlify/functions-internal/server/server.js:16368:10)
    at /var/task/.netlify/functions-internal/server/server.js:135662:40
    at renderComponentSubTree (/var/task/.netlify/functions-internal/server/server.js:16062:7)
    at /var/task/.netlify/functions-internal/server/server.js:16017:26
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

I’m guessing the above 👆 correlates to how inject is used here:

const usePrismic = () => {
  return inject(prismicKey, { options: { endpoint: "" } });
};

[cfab]

Thank you!

[lihbr]

Hey there,

First of all, sorry for the delay it took to get back to you. I’ll make sure to ramp up our Nuxt 3 support effort as the framework leans toward its full release.

I just released a patch fixing the primary issue (usePrismic() is undefined) when @nuxtjs/prismic is installed as a regular dependency (basically the fix was forcing Nuxt to transpile our Vue plugin, see: ead4eb1071e47c6e175bc557003f4fef22e214cb)

Install it with npm install @nuxtjs/prismic@3.0.0-alpha.3

Overall I’d recommend keeping @nuxtjs/prismic as a dev dependency. However, if having it as a regular dependency can be an escape hatch it’s fine to keep it as it (I guess? I asked Nuxt team about guidelines on that matter).

I’ll close this issue as everything related directly to @nuxtjs/prismic seem to have been fixed. We’ll track progress about the Slice Machine related issue on: https://github.com/prismicio/slice-machine/issues/420 (and I’ll ping Slice Machine team on it!)

Thanks for your contribution! 💚