Error with gatsby-plugin-prismic-previews

Hi there, I got an error after installing the plugin and set it up. Do you know where it can come from ?

Here is the terminal log

"gatsby-plugin-prismic-previews" threw an error while running the onPostBootstrap lifecycle:

Did not find Custom Type model IDs from gatsby-source-prismic.

  36 |  );
  37 |  if (!isCustomTypeModelIDs(customTypeModelIDs)) {
> 38 |          throw new Error(
     |                ^
  39 |                  "Did not find Custom Type model IDs from gatsby-source-prismic.",
  40 |          );
  41 |  }

File: node_modules/gatsby-plugin-prismic-previews/src/gatsby-node/onPostBootstrap.ts:38:9

And the console one

Uncaught TypeError: gatsby_plugin_prismic_previews__WEBPACK_IMPORTED_MODULE_5__.componentResolverFromMap is not a function

My plugin is set up like that in the gatsby-config file

{
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
      },
    }

Hi @ezoe

Thanks for reaching out,

I have checked with our dev team, and it looks like you might be using the pre-release version of Gatsby + Prismic V6 (latest is V5).

Our documentation has not been updated to use V6, and we do not recommend using it until it is fully released.

We plan to release it soon along with documentation and we will have a migration guide available at that time.

Can you share the output of this terminal command?

npx gatsby info

This should list the version of gatsby-source-prismic and gatsby-plugin-prismic-previews.

If it lists versions starting with 6.0.0-alpha., then you will need to install the stable version:

npm i --save gatsby-source-prismic@latest gatsby-plugin-prismic-previews@latest

Looking forward to your reply,
Fares

Hi Fares,
Thanks for the quick answer, it was that! The npm command as described on your docs installed the 6.0.0-alpha.

So now I have the live preview working, however, is it possible to see the page preview before publishing a new version ? For now when I click on the eye symbol to preview the page I only see the latest published version of the page ?
Also, when I click on this button, it goes to the root of the website and not the page I'm working on, is it normal ?

Hi @ezoe
Happy to hear that you have been able to resolve the issue. Can you please tell us where in the documentation we have mentioned 6.0.0-alpha

I've only run the command you specified on this doc

npm install gatsby-source-prismic gatsby-plugin-image @prismicio/react

Do you have answers for the other questions on my previous message?

1 Like

Hi @ezoe

No, it is not normal.

It seems that you didn't configure the previews correctly in your project.
Have you followed the Gatsby preview documentation?

You can also check this troubleshooting guide

I have followed the doc exactly… And use Gatsby cloud.

When I click on the preview, it display the root page however the name of the page I'm trying to preview is written in the prismic blue box on left bottom corner.

Here are the several files according to your documentation.

gatsby-config

{
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
      },
    },

gatsby-ssr.js / * gatsby-browser.js

import "./src/styles/global.scss"
import * as React from 'react'
import {
  PrismicPreviewProvider,
  componentResolverFromMap,
} from 'gatsby-plugin-prismic-previews'

import { routeResolver } from './linkResolver'
import PageTemplate from './src/components/Layout'

export const wrapRootElement = ({ element }) => (
  <PrismicPreviewProvider
    repositoryConfigs={[
      {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        routeResolver,
        componentResolver: componentResolverFromMap({
          page: PageTemplate,
        }),
      },
    ]}
  >
    {element}
  </PrismicPreviewProvider>
)

preview.js

import * as React from 'react'
import { withPrismicPreviewResolver } from 'gatsby-plugin-prismic-previews'

const PreviewPage = () => {
  return (
    <div>
      <h1>Loading preview…</h1>
    </div>
  )
}

export default withPrismicPreviewResolver(PreviewPage)

link-resolver.js

exports.linkResolver = (doc) => {

    switch (doc.type) {
        case 'home': {
          return `/${doc.lang.slice(0, 2)}`
        }

        case 'contact': {
          return `/${doc.lang.slice(0, 2)}/${doc.uid}`
        }

        case 'page': {
          return `/${doc.lang.slice(0, 2)}/${doc.uid}`
        }
    
        case 'creation': {
          return `/${doc.lang.slice(0, 2)}/creations/${doc.uid}`
        }

        case 'news': {
            return `/${doc.lang.slice(0, 2)}/news/${doc.uid}`
          }
        
        case 'slideshow': {
          return `/${doc.lang.slice(0, 2)}/${doc.uid}`
        }
    
        default:
          return '/'
      }
      
  }

Hi @Fares, do you have an answer regarding this issue ?

Hi @ezoe
I'm gathering some information from our dev team, and I will get back to you in case of any updates.

Hello @ezoe, thanks for sharing your use case. We found an error in the documentation and have updated it (see updated page). repositoryConfigs does not accept a routeResolver option.

If your project uses a Route Resolver in the plugin configuration, you can omit adding a Link Resolver to repositoryConfigs.

1 Like

I'm happy to help with this use case to correct your documentation, however it doesn't solve entirely the issue.

I have made the correction you mentionned and also the linkResolver has your docs changed for it too.
And now I have this error:

Here is the new gatsby-config:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

const routes = [
  {
    type: "home",
    path: "/${doc.lang.slice(0, 2)}/",
  },
  {
    type: "contact",
    path: "/${doc.lang.slice(0, 2)}/${doc.uid}/",
  },
  {
    type: "page",
    path: "/${doc.lang.slice(0, 2)}/${doc.uid}/",
  },
  {
    type: "creation",
    path: "/${doc.lang.slice(0, 2)}/creations/${doc.uid}/",
  },
  {
    type: "news",
    path: "/${doc.lang.slice(0, 2)}/news/${doc.uid}/",
  },
  {
    type: "slideshow",
    path: "/${doc.lang.slice(0, 2)}/${doc.uid}/",
  }
]

module.exports = {
  siteMetadata: {
    title: `The sun project`,
    siteUrl: `https://www.thesunproject.fr`
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
        routes
      },
    },
...

and the new linkResolver:

exports.linkResolver = (doc) => {
        if (doc.type === 'home') {
          return `/${doc.lang.slice(0, 2)}/`
        }

        if (doc.type === 'contact') {
          return `/${doc.lang.slice(0, 2)}/${doc.uid}/`
        }

        if (doc.type === 'page') {
          return `/${doc.lang.slice(0, 2)}/${doc.uid}/`
        }
    
        if (doc.type === 'creation') {
          return `/${doc.lang.slice(0, 2)}/creations/${doc.uid}/`
        }

        if (doc.type === 'news') {
            return `/${doc.lang.slice(0, 2)}/news/${doc.uid}/`
          }
        
        if (doc.type === 'slideshow') {
          return `/${doc.lang.slice(0, 2)}/${doc.uid}/`
        }
    
        return '/'
  }

So, you should use one of the other. How are you using both in this case?

I don't understand your question.

I have the linkResolver set up for the prismic source plugin as explained in this doc and working perfectly with gatsby build, and then I followed your new guide for the prismic preview here, with the routes const in the gatsby-config.

Isn't it what I should do ?

Best would be to have only the linkResolver for all but it's not working with that only.
I don't specify a routes const in the prismic preview config it's not working. And if I use the linkResolver I have an issue because it's not an array.

I must say your docs are a bit confusing.

Sorry to hear this was a bit confusing. We'll work to make the documentation clearer.
You should use only one. In your case, since you're choosing the Link Resolver, you need to declare it in both plugin configurations and then use it in the repositoryConfigs of < PrismicPreviewProvider>

It's working perfectly now, thanks!

1 Like