Can not set up previews with V4 Gatsby Prismic integration

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 Gatsby Tutorial. 6. Previews and Deployment - Prismic

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:

  1. page resources for /preview/ not found. Not rendering React

  2. 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.

1 Like

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

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.

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.

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

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

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,
        },
      },
    },

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

Can you verify the following in the project?

  1. Is gatsby-plugin-prismic-previews added to gatsby-config.js? You can see an example here: Gatsby Tutorial. 6. Previews and Deployment - Prismic

  2. 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?

  3. 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!

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.

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".

@angeloashmore no, I see just iframe
DeepinScreenshot_select-area_20210803064821

@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!

1 Like

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!

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

1 Like

@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:

  1. 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).

  2. 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!

1 Like

Hi, @angeloashmore. Yes. I have cookies warning

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

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

Cookies errorrs in FireFox

@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'
      },
    },
  ],
}

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