Gatsby Cloud & Prismic Preview issue

Developing with Prismic
1

Hi everyone,

I've been banging my head against the wall for a few hours now and I am ready to give up.

The /preview page in Gatsby (running on Gatsby Cloud) does not do a redirect to the right page.
It works in local development, it even works with gatsby build & gatsby serve locally.

I've installed gatsby-plugin-gatsby-cloud as well and added it to the gatsby-config
I don't what else to do - I played with every aspect of the prismic preview setup and again - it's working locally and with a local build, so my guess is it's related to gatsby cloud.

You can test it here: https://preview-sdiawebsitemain.gtsb.io/preview

And here is some relevant code (preview.js page):

import * as React from 'react'
import { withPrismicPreviewResolver } from 'gatsby-plugin-prismic-previews'
import { linkResolver } from '../utils/LinkResolver'

const PreviewPage = (props) => {
  console.log('Preview', props)
  return (
    <div>
      <h1>Loading preview…</h1>
    </div>
  )
}

export default withPrismicPreviewResolver(PreviewPage, [
  {
    repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
    linkResolver,
  },
])

gatsby-browser.js and gatsby-ssr.js

// gatsby-ssr.js and gatsby-browser.js files

import * as React from 'react'
import { PrismicPreviewProvider, componentResolverFromMap } from 'gatsby-plugin-prismic-previews'
import { HubspotProvider } from '@aaronhayes/react-use-hubspot-form'
import { linkResolver } from './src/utils/LinkResolver'

import HomeTemplate from './src/pages/index'
import PageTemplate from './src/pages/{PrismicPage.uid}'
import EventTemplate from './src/pages/events/{PrismicEvent.uid}'
import MembershipTemplate from './src/pages/memberships/{PrismicMembership.uid}'
import OrganizationMemberTemplate from './src/pages/members/{PrismicOrganizationMember.uid}'
import SteerinGroupTemplate from './src/pages/steering-groups/{PrismicSteeringGroup.uid}'
import LandingPageTemplate from './src/pages/landing/{PrismicLandingPage.uid}'

import 'gatsby-plugin-prismic-previews/dist/styles.css'
import './src/styles/main.scss'

export const wrapRootElement = ({ element }) => (
  <HubspotProvider>
    <PrismicPreviewProvider
      repositoryConfigs={[
        {
            repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
            linkResolver,
            componentResolver: componentResolverFromMap({
              homepage: HomeTemplate,
              page: PageTemplate,
              event: EventTemplate,
              membership: MembershipTemplate,
              organization_member: OrganizationMemberTemplate,
              steering_group: SteerinGroupTemplate,
              landing_page: LandingPageTemplate,
            })
        },
    ]}
    >
      {element}
    </PrismicPreviewProvider>
  </HubspotProvider>
)

gatsby-config.js

    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
        linkResolver: require('./src/utils/LinkResolver').linkResolver,
      },
    },
    {
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
      },
    },

Does anyone have a hint?

2

Nevermind - I solved it by upgrading all plugins to the latest version - and it works.

1 Like
3

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.