$prismic object not recognised in nuxt.config.(js|ts)

[Jack Domleo]

Versions

• "@nuxtjs/prismic": "^1.3.1"
• "nuxt": "^2.15.7"
• "typescript": "^4.3.5"
• node: v14.17.3

Reproduction

1. Create a simple Nuxt.js project with Single Page App & Static. This bug happens when using JS or TS.
2. Create a Prismic repository and create a repeatable type (let's call it "blog-article" for now). Be sure to include the uid field.
3. Make a few example blog article pages in Prismic (can fill in with lorem ipsum text, doesn't really matter).
4. You don't need to actually create the pages/blog/_slug.vue pages to replicate this bug, but it's a nice-to-have. In Nuxt, we have to generate any dynamic routes in the nuxt.config.(js|ts) in order for them to be generated in the generate command.
5. Follow the Nuxt docs on generating dynamic routes by calling your Prismic repo API through the $prismic object. Code could look something like this:

// nuxt.config.js
const { $prismic } = require('@nuxtjs/prismic')

export default {
  ...
  generate: {
    async routes () {
      let generatedRoutes = []

      // Blog pages
      const articles = await $prismic.api.query(
        $prismic.predicates.at('document.type','blog-article')
      )
      articles.results.forEach(article => {
        generatedRoutes.push(
          {
            route: `/blog/${article.uid}`,
            payload: article
          }
        )
      })

      return generatedRoutes
    }
  }
}

6. Run npm run generate.

What is Expected?

npm run generate command to run smoothly and should see the routes you've just dynamically generated be logged in the generate script.

What is actually happening?

generate script fails because of TypeError: Cannot read property 'api' of undefined. It seems as though it's not liking the .api on $prismic.api.

---

I don't think I have missed anything, but if I have, please let me know, and sorry for if I raised a bug that's not a bug. I can't find anything else online about this. Any help is appreciated.

Thanks!

[Jack Domleo]

I have found a workaround for now using @prismicio/client package, but obviously would be good to get @nuxtjs/prismic working instead.

// nuxt.config.js
const Prismic = require('@prismicio/client')

export default {
  ...
  generate: {
    async routes () {
      let generatedRoutes = []

      // Blog pages
      const client = Prismic.client(process.env.PRISMIC_ENDPOINT, {
        accessToken: process.env.PRISMIC_ACCESS_TOKEN
      })
      const articles = await client.query(Prismic.Predicates.at('document.type', 'blog-article'))
      articles.results.forEach(article => {
        generatedRoutes.push(
          {
            route: `/blog/${article.uid}`,
            payload: article
          }
        )
      })

      return generatedRoutes
    }
  }
}

[Lucie]

Hey @jackdomleo7, thanks for asking!

It's actually not a bug: it's not a feature:

@nuxtjs/prismic doesn't export anything else apart from the module, therefore you cannot import $prismic from it (and even if there was such an export I'm not sure how it could get configured properly since its configuration is part of the Nuxt config file but I digress here)

One way of getting access to $prismic inside the generate.routes function could have been through Nuxt context but it's not made available by Nuxt here (for reasons, I guess? cc @pi0)

Anyway, here are your options to achieve the desired result:

• Using Nuxt.js built-in crawler, this one will figure out on its own all pages that need to be generated. It's reliable in most cases (the only case where it can miss pages is if you have dynamic pages with no other pages linking to them, but that's quite rare)
• Using @prismicio/client, like you did above, to fetch the needed content inside the generate.routes function.

Let us know if anything, happy to help!

[Jack Domleo]

Thank you for the response, makes total sense. I think I'll stick with using @prismicio/client approach. I may switch to the crawler when I can confirm I have no dynamic pages with other pages linking to them.