Prismic and GATSBY, some issues and fixes

Developing with Prismic
1

Hey everyone, yesterday i had a big issue with the gatsby and prismic preview. The issue was pretty easy to resolve, but the errors was not clear enough to know where the problem is.
Here is an tutorial which i used to provide previews for my gatsby page: https://prismic.io/docs/technologies/previews-hocs-gatsby
So first of all, why does this tutorial use import instead of module exports? Normal gatsby-xxx.js file does not supports imports.
Second thing, even if i used

`import * as React from 'react'
import { PreviewStoreProvider } from 'gatsby-source-prismic'

const wrapRootElement = ({ element }) => (
{element}
)
export default wrapRootElement`

with module exports i will see an error which is not explained. I was struggling a lot to find an answer for my question where the problem is. Finally i found an answer, after hours of struggling with this problem.
The tutorial work only with the develop mode.
Way to fix my bug was change this code to work with "gatsby build".

const React = require('react')

const { PreviewStoreProvider } = require('gatsby-source-prismic');

exports.wrapRootElement = ({ element }) => {

const isSSR = typeof window === "undefined"

if (isSSR) {

    return <React.Fragment>{element}</React.Fragment>

}

return (

  <PreviewStoreProvider>

    {element}

  </PreviewStoreProvider>

)

}

That is a code which worked properly for me instead of code from this tutorial, after this changes HoC worked correct.
And my question is, does this tutorial is wrong or something in my code can break correct work of this plugin?

Greetings from Poland, with regards
Adrian

3

Hello Adrian,

Thanks for pointing out this to us.

We indeed need to update this documentation. Meantime, you can follow our up-to-date example project where we have fixed issues with those files.

You can launch this project code by running the theme command.

import * as React from 'react'
import { PreviewStoreProvider } from 'gatsby-source-prismic'

export const wrapRootElement = ({ element }) => (
  <PreviewStoreProvider initialEnabled={true}>{element}</PreviewStoreProvider>
)

Let me know if you have any doubt.

Thanks,

Priyanka

4

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