[v6] Draft page preview returns 404

Developing with Prismic
1

Versions

  • gatsby-source-prismic: ^6.0.0
  • gatsby-plugin-prismic-previews: ^6.0.0
  • gatsby: ^5.11.0
  • Node.js: v18.16.1

Reproduction

After migrating from version 5 to version 6, the preview for draft pages stopped working. It returns a 404 page. Preview works correctly for published or planned pages. Used this migration documentation - https://github.com/prismicio/prismic-gatsby/blob/4a8f7c7d9a22139b98cf8a3e29f2492173435851/docs/migration-guide-v5-to-v6.md

const About = React.lazy(() => import('pages/about-us'));

export const repositoryConfigs = [
  {
    repositoryName: process.env.GATSBY_PRISMIC_REPO,
    linkResolver,
    componentResolver: {
      about_page: About,
      ...
    }
  }
]

gatsby-browser.js

<PrismicPreviewProvider repositoryConfigs={repositoryConfigs}>
     <>
       <Analytics />
       {element}
     </>
 </PrismicPreviewProvider>

gatsby-config.js

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

All pages wraped in to withPrismicPreview
export default withPrismicPreview(About)

Steps to reproduce

Log in to the Prismс dashboard. Open the draft page. Click on the local preview.

What is expected?

Local preview and Gatsby Cloud Preview shows the content of the page.

What is actually happening?

Local preview and Gatsby Cloud Preview shows 404 page.

2

hey team, what do you see on the 404 page. During development the Gatsby 404 page will always appear. Click the “Preview custom 404 page” button. You should see the preview appear

4

hi @Pau thanks for the response.

we see our regular 404 page on localhost and Gatsby Cloud preview. We do not see the "Preview custom 404 page" button.

This is what Prismic Toolbar looks like: Prismic Toolbar Screenshot

This is console error:Failed to load resource: the server responded with a status of 404 (Not Found) Console Error Screenshot

Thanks for any advice!

5

Are you using Gatsby Cloud?

If it’s a draft or unpublished document, Gatsby Cloud won’t see it. When using gatsby-plugin-prismic-previews, you can preview it immediately

6

Try this solution too: Unpublished previews not working with Gatsby, Prismic and Netlify