Can not set up previews with V4 Gatsby Prismic integration

dmitry.d · July 26, 2021, 9:53am

Hello, Prismic People.

Could you please help me to solve the problem with the preview? I just migrated project to v4 gatsby-source-prismic. I installed gatsby-plugin-prismic-previews. I set up previews in Prismic repository and set up previews in project code according to this guide https://prismic.io/docs/technologies/tutorial-6-preview-deploy-gatsby

Everything is working fine except the preview function. Previews do not work, when I try to see preview from Prismic repo, I have two errors in browser console:

page resources for /preview/ not found. Not rendering React
Uncaught (in promise) ReferenceError: process is not defined

The build is live. I tried to search these errors, I installed path module, but errors are still here.

dmitry.d · July 26, 2021, 2:27pm

Update: I fixed all errors, but preview does not work. Can not guess why

Pau · July 30, 2021, 3:01pm

Hello @dmitry.d thanks for reaching out.

I had a similar error a couple of days ago and it was because I was missing to add the _previewable field to my page queries.

Are you following the tutorial from step one or do you have a separate project? If you have your own project I recommend you read the Preview setup guide.

dmitry.d · July 30, 2021, 3:50pm

Hi, Paulina. Thank you. I add that field to query and set up everything exactly like in the guide. But it does not work for me.

Pau · July 30, 2021, 8:32pm

Could you share the following additional information with us so we can understand your use case better?

The Link Resolver that you setup in the plugin options
Your preview resolver page (preview.js)

You can paste the code snippets here and we'll take a look

dmitry.d · August 2, 2021, 7:42am

Hi, @Pau. Here they are:
Linkresolver:

const { defaultLanguage } = require('./../../prismic-config');

const linkResolver = (doc) => {
  const properties = doc._meta || doc;

  if (properties.type === 'homepage') {
    return properties.lang === defaultLanguage
      ? '/'
      : `/${properties.lang.slice(0, 2)}/`;
  }

  if (properties.type === 'blog') {
    return properties.lang === defaultLanguage
      ? '/blog'
      : `/${properties.lang.slice(0, 2)}/blog`;
  }

  if (properties.type === 'preview') {
    return properties.lang === defaultLanguage
      ? '/preview'
      : `/${properties.lang.slice(0, 2)}/preview`;
  }

  if (properties.type === 'blogpost' && properties.uid) {
    return properties.lang === defaultLanguage
      ? `/blog/${properties.uid}`
      : `/${properties.lang.slice(0, 2)}/blog/${properties.uid}`;
  }

  // Backup for all other types
  return '/';
};

module.exports = linkResolver;

Preview resolver:

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

import linkResolver from '../../prismic/utils/linkResolver';
import { prismicRepositoryName } from '../../gatsby-config';

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

export default withPrismicPreviewResolver(PreviewPage, [
  {
    repositoryName: prismicRepositoryName,
    linkResolver,
  },
]);

gatsby-config.js fragment:

{
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: prismicRepositoryName,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        linkResolver: (doc) => linkResolver(doc),
        schemas: {
          layout: require('./schemas/layout.json'),
          homepage: require('./schemas/homepage.json'),
          blog: require('./schemas/blog.json'),
          blogpost: require('./schemas/blogpost.json'),
        },
        lang: '*',
        imageImgixParams: {
          auto: 'compress,format',
          fit: 'max',
          q: 45,
        },
      },
    },

angeloashmore · August 2, 2021, 6:37pm

Hey @dmitry.d, thanks for providing those files.

Can you verify the following in the project?

Is gatsby-plugin-prismic-previews added to gatsby-config.js? You can see an example here: Gatsby Tutorial. 6. Previews and Deployment - Prismic
Is prismicRepositoryName correctly exported from gatsby-config.js? Can you log prismicRepositoryName within src/pages/preview.js to verify that withPrismicPreviewResolver is being provided with the correct configuration?
Is gatsby-browser.js and gatsby-ssr.js setup with <PrismicPreviewProvider>? You can see an example here: Gatsby Tutorial. 6. Previews and Deployment - Prismic

Based on your screenshot, it looks like the plugin is not detecting an active preview session. This could happen for a few reasons:

The Prismic Toolbar is not loaded. This is added automatically when gatsby-plugin-prismic-previews is configured in gatsby-config.js
The repositoryName provided to withPrismicPreviewResolver is not the same repository name as the preview token (this is setup when you click the preview button in Prismic). This could happen if the repository name was mistyped or imported incorrectly.

Thanks!

dmitry.d · August 2, 2021, 7:25pm

Hi, @angeloashmore. All 1, 2 and 3 are set up according to tutorial. Just checked them again — all three are ok, I can log pismicRepositoryName in preview.js.

angeloashmore · August 3, 2021, 12:51am

Thanks for checking @dmitry.d. One more thing to look for: if you inspect the page, do you see the Prismic toolbar in the DOM? You'll see it as an element with an ID of "prismic-toolbar-v2".

dmitry.d · August 3, 2021, 3:49am

@angeloashmore no, I see just iframe
DeepinScreenshot_select-area_20210803064821

angeloashmore · August 4, 2021, 12:59am

@dmitry.d When you start a preview, do you still only see the iframe without the prismic-toolbar-v2 div?

It might be easier for us to debug this issue if you are able to send me your project's code. If you are comfortable with sending your code, you can send me a private message with a link to a ZIP of the project (or your Git repo if it is public). If you run into size upload limits, be sure to leave out node_modules, public, and .cache.

Thanks!

dmitry.d · August 4, 2021, 6:46am

Hi, @angeloashmore. I only see iframe without prismic-toolbar-v2 div in preview mode. I have sent you DM with project code. Thank you very much!

brett1 · August 5, 2021, 2:47am

Thanks for this post. So far with all the info I've read, my problem is identical to @dmitry.d 's. I can't share the codebase unfortunately, so looking forward to a solution here if you come across one.

Thanks

angeloashmore · August 5, 2021, 6:57pm

@dmitry.d Thanks for sending your code. I tested it locally with a clone of your Prismic repository and everything worked as expected. The only change I made was editing the prismicRepository value in prismic-config.js to the new repository I created.

I noticed your previews are setup for Gatsby Cloud. Can you add an additional Preview to your repository for http://localhost:8000/preview and test it locally?

I think the issue is related to:

The preview token from Prismic is not matching with the configuration in the Gatsby project. If the plugin cannot find a matching Prismic repository config in withPrismicPreviewResolver, it will do nothing since it isn't a valid preview. (Maybe this is an opportunity for the plugin to show an alert as feedback).
The toolbar is not loading or it is not setting the preview cookie. The toolbar is crucial to setting the preview token as a cookie which the plugin then reads. Do you see any warnings or errors related to privacy and/or cookie management?

@brett1 Sorry to hear you're also having issues. Once we figure out the issue, I can update the plugin to either provide better feedback to avoid the issue or fix a bug if there is one.

Thank you both for your patience!

dmitry.d · August 6, 2021, 2:53pm

Hi, @angeloashmore. Yes. I have cookies warning

Should I fix it on my side or is this a plugin-side issue?

dmitry.d · August 6, 2021, 3:02pm

@angeloashmore could you please show me settings of new clone Prismic repo? Previews first of all. My localhost previews do not work.

dmitry.d · August 6, 2021, 3:05pm

Cookies errorrs in FireFox

angeloashmore · August 9, 2021, 6:38pm

@dmitry.d Thanks for checking those issues. The cookie issue is something we're looking into at the moment, but it should continue to work right now. The warnings you posted will take effect in the future.

The only configuration change I made to the code you sent was the repository name in prismic-config.js. I'm leaving it out of this post to keep it private.

// prismic-config.js

module.exports = {
  prismicRepositoryName: 'NEW REPO NAME HERE',

  defaultLanguage: 'en-gb',
  langs: ['en-gb'],
};

I added a preview in the Prismic repository for localhost like this:

Could you check if your repository needs the new or legacy toolbar? You can do this by going to the Previews section of your Prismic repository's settings.

If you see new=true, then there is no special setup required. If you do not see new=true, you will need to configure gatsby-plugin-prismic-previews to use the legacy toolbar.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: 'repo-name',
        toolbar: 'legacy'
      },
    },
  ],
}

Pau · August 16, 2021, 7:24pm

This thread has been closed due to inactivity. Flag to reopen.

Topic		Replies	Views
Getting previews working in Gatsby 2 Developing with Prismic gatsby	4	670	December 9, 2021
Unpublished previews not working Developing with Prismic gatsby	16	2213	March 3, 2022
Can not set up Gatsby Prismic preview Developing with Prismic gatsby	11	798	March 2, 2022
Gatsby preview is not working Developing with Prismic gatsby	5	517	December 9, 2021
Gatsby Plugin Prismic Previews gatsby-plugin-prismic-previews not working Developing with Prismic gatsby	10	287	December 14, 2023

Can not set up previews with V4 Gatsby Prismic integration

Related Topics