Preview link throws cannot read property 'options' of undefined

[Giulico]

When I open the preview link I get this error:

Unhandled Rejection (TypeError): Cannot read property 'options' of undefined

PreviewPage.js
}, {
    key: "config",
    get: function get() {
      return this.props.prismic.options;
    }
  }]);

gatsby-config.js

   plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'My Project Name',
        short_name: 'Project',
        start_url: `/`,
        background_color: `#FFFFFF`,
        theme_color: `#000000`,
        display: `standalone`,
        icon: 'src/assets/icons/favicon.png',
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-react-helmet-async',
    {
      resolve: 'gatsby-plugin-transition-link',
      options: {
        layout: require.resolve('./src/components/Layout'),
      },
    },
    {
      resolve: 'gatsby-plugin-postcss',
      options: {
        cssLoaderOptions: {
          camelCase: true,
        },
        postCssPlugins,
      },
    },
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          '@actions': path.resolve(__dirname, 'src/store/actions'),
          // Other aliases
        },
        extensions: ['js', 'css'],
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages/`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: process.env.PRISMIC_REPOSITORY,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        path: '/preview',
        previews: true,
        // omitPrismicScript: true,
        langs: ['en', 'es', 'it'],
        defaultLang: 'en', // optional, but recommended
        sharpKeys: [/image|photo|picture|logo|thumbnail|portrait/],
      },
    },
  ],

I'm using gatsby-source-prismic-graphql 3.6.2

[veloce]

Hello! Can you precise what other gatsby plugins are you using? Thanks.

[Giulico]

Sure. I edited my first post specifying them. Thank you. @veloce

[veloce]

Thanks @Giulico . If I can reproduce this error, maybe I can find a solution.

[Giulico]

@veloce I believe the issue is releated to the absence of the props.prismic object on my pages components. I noticed that if I export my queries as const query I get the props.prismic on my pages, otherwise if I export my queries as const pageQuery I don't get it. Weird, isn't it? I can not keep const query because as so, my Layout component is unmounted on each route change. 🤕

As soon as possible I'm going to share a small-size repo as example.

[Giulico]

I create a minimun-size repo as example: https://github.com/Giulico/gatsby-prismic-test

Take a look at the console while navigating through the two pages.

[veloce]

Thanks @Giulico ! A min size repo is the best to reproduce and fix the issue. I'll look at it.

[veloce]

@Giulico I still don't know how to fix this but I noticed that in your case loading the gatsby-plugin-layout after the prismic plugin seems to solve the issue if you also export your page queries as query. I don't see the layout being unmounted and the preview link is working.

[Giulico]

Yeah, this work around works for me too! Thank you @veloce