Unpublished page showing blank screen on preview

[hazem3500]

Versions

• gatsby-source-prismic: v5.0.0
• gatsby-plugin-prismic-previews: v5.0.0
• node: v14.15.0

Steps to reproduce

So I'm trying to preview an unpublished page from Prismic. I'm passing the component resolver to PrismicPreviewProvider in gatsby-browser.js

import React from 'react';
import {
    PrismicPreviewProvider,
    componentResolverFromMap,
} from 'gatsby-plugin-prismic-previews';
import Root from './src/components/Root/Root';
import PageTemplate from './src/templates/page';
import linkResolver from './src/utils/linkResolver';

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

And in the 404 page, I'm wrapping the page with the withPrismicUnpublishedPreview HOC

import React from 'react';
import {
    withPrismicUnpublishedPreview,
} from 'gatsby-plugin-prismic-previews';

function ErrorPage() {
    return (
        <div>...</div>
    );
}


export default withPrismicUnpublishedPreview(ErrorPage);

But I'm getting a blank screen

In the console, I'm getting errors like

GET http://localhost:9000/test 404 (Not Found)

GET http://localhost:9000/page-data/test/page-data.json 404 (Not Found)

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

What is expected?

I should be able to preview unpublished pages

What is actually happening?

I'm getting a blank screen

[angeloashmore]

Hi @hazem3500,

The 404 errors are normal since, when previewing an unpublished document, you will be the 404 page.

Can you confirm a couple of things?

• Is the URL correct? Should the unpublished previewed document's URL be /test? I'm wondering if the linkResolver is working correctly.
• If you run this preview in development (i.e. gatsby develop rather than gatsby build && gatsby server), do you see a different error?

Thanks! 🙂

[hazem3500]

Hey @angeloashmore 👋

Is the URL correct? Should the unpublished previewed document's URL be /test? I'm wondering if the linkResolver is working correctly.

Yup, the URL should be /test, was testing out preview XD The linkResolver is working with published pages.

If you run this preview in development (i.e. gatsby develop rather than gatsby build && gatsby server), do you see a different error?

I see the Gatsby.js development 404 page, Though when I click the preview 404 page I get to see the page template like expected, but the data prop passed to the template isn't for the page I'm previewing, It passes the data for the 404 page.

[angeloashmore]

@hazem3500 Do you have <PrismicPreviewProvider> in both gatsby-browser.js and gatsby-ssr.js? If not, can you make sure both have the same wrapRootElement?

If that does not fix it, could you copy or screenshot the whole console error, including the stack trace? I can't tell where that error is coming from. Thanks!

[hazem3500]

Oh, while both gatsby-browser and gatsby-ssr had PrismicPreviewProvider, I wasn't passing the repositoryConfigs to the one in gatsby-ssr 😅

unfortunately, it still didn't fix the issue 😢

When I preview in dev mode, I get an empty page and consoling logging the GraphQL query data of the page template, it gives me the data for the 404 page.

When I preview after build, it gives an error

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at nonIterableSpread.js:2
    at o (toConsumableArray.js:6)
    at e.importTypePaths (runtime.ts:229)
    at Ii (context.tsx:200)
    at Object.ta [as useReducer] (react-dom.production.min.js:157)
    at Object.useReducer (react.production.min.js:25)
    at Di (context.tsx:348)
    at Gi (react-dom.production.min.js:153)
    at Ua (react-dom.production.min.js:175)
    at xo (react-dom.production.min.js:263)

[hazem3500]

@angeloashmore any pointers on how to solve this 😅?

[angeloashmore]

@hazem3500 I'll test some things out on my side, but could you share your Prismic repository name with me? It could be something specific to a Custom Type model.

If you want to keep it private, you can send me a message on the Prismic forum here: https://community.prismic.io/new-message?username=angeloashmore&title=GitHub%20Issue%20468

Thanks!

[gabrielloeb]

Encountered the same error and resolved switching back to manual schemas.

[matijamrkaic]

Currently facing the same issue. Switching to manual schemas had no effect.