prismic-gatsby: [v4] A configuration object could not be found

the error:

withPrismicPreview.tsx:109 Error: A configuration object could not be found for repository "karrot". Check that the repository is configured in your app's usePrismicPreviewResolver.
    at eval (usePrismicPreviewBootstrap.ts:150)
    at eval (Either.js:70)
    at eval (function.js:180)
    at pipe (function.js:277)
    at eval (usePrismicPreviewBootstrap.ts:145)
    at eval (Chain.js:5)
    at eval (EitherT.js:24)
    at eval (ReaderT.js:12)
    at eval (Task.js:110)
eval @ withPrismicPreview.tsx:109

gatsby-config.js

    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: 'karrot',
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        schemas: {
          'mbti-test-result': {},
          mbti_intro: {},
          mbti_test_question: {},
          ads_intro: {},
          global_contents: {},
          faq: require('@karrotmarket/prismic-config/schema/faq.json'),
          site_navigation: require('@karrotmarket/prismic-config/schema/site_navigation.json'),
          terms_and_conditions: require('@karrotmarket/prismic-config/schema/terms_and_conditions.json'),
          member_profile: require('@karrotmarket/prismic-config/schema/member_profile.json'),
          team_contents: require('@karrotmarket/prismic-config/schema/team_contents.json'),
        },
      },
    },
    {
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: 'karrot',
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        toolbar: 'new',
      },
    },

wrapRootElement (both gatsby-browser.jsx and gatsby-ssr.jsx)

import * as React from 'react';
import type { GatsbyBrowser, GatsbySSR } from 'gatsby';
import { PrismicPreviewProvider } from 'gatsby-plugin-prismic-previews';

export const wrapRootElement: (GatsbyBrowser | GatsbySSR)['wrapRootElement'] = ({
  element,
}) => {
  return (
    <PrismicPreviewProvider>
      {element}
    </PrismicPreviewProvider>
  );
};

the preview resolver page

export const linkResolver: LinkResolver = doc => {
  switch (doc.type) {
    case 'site_navigation': {
      return '/';
    }
    case 'faq': {
      return '/faq/';
    }
    case 'team_contents': {
      return '/';
    }
  }
  return '/';
}

export default withPrismicPreviewResolver(PreviewResolverPage, [
  {
    repositoryName: 'karrot',
    linkResolver,
  },
]);

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 28 (21 by maintainers)

Most upvoted comments

Adding this context for someone else running into a similar issue in the future:

For me I narrowed down the issue as coming from the gatsby-browser.js file, and that replacing the process.env.<repo-name> variable with a string fixed it. My PrismicProvider looked something like this:

export const wrapRootElement = ({ element }) => (
  <PrismicProvider
    internalLinkComponent={({ href, ...props }) => (
      <Link to={href} {...props} />
    )}
  >
    <PrismicPreviewProvider
      repositoryConfigs={[
        {
          repositoryName: process.env.PRISMIC_REPO_NAME,
          linkResolver,
          componentResolver: componentResolverFromMap({
            front_page: FrontPage,
          }),
        },
      ]}
    >
      {element}
    </PrismicPreviewProvider>
  </PrismicProvider>
)

Can you spot the issue? Depending on what framework you are using, environment variables are not allowed to be accessed by the client browser, unless they are prefixed with a particular string. So for me, changing the environment variable to GATSBY_PRISMIC_REPO_NAME solved the issue.

ErikAGriffin on Jan 24, 2022