[Gatsby] `usePrismicContext` returns {} using `PrismicProvider` inside `wrapRootElement` API

[morellodev]

Versions

• @prismicio/react: v2.0.2
• react: v16.12.0
• node: v14.15.5

Description

I am adding a linkResolver function and a custom internalLinkComponent to the entire Gatsby website, putting the <PrismicProvider> inside the wrapRootElement (both in gatsby-ssr.js and in gatsby-browser.js). If I open the React devtools, I can see the PrismicProvider in the components tree, but every child that access the value exposed by it receives an empty object.

// gatsby-ssr.js and gatsby-browser.js

const React = require('react')
const { Link } = require('gatsby')
const { PrismicProvider } = require('@prismicio/react')

const linkResolver = require('./linkResolver')

exports.wrapRootElement = ({ element }) => {
  return (
    <PrismicProvider
      linkResolver={linkResolver}
      internalLinkComponent={({ href, children, ...otherProps }) => (
        <Link to={href} {...otherProps}>
          {children}
        </Link>
      )}
      externalLinkComponent={({ href, target, children, ...otherProps }) => {
        const targetProps = target ? { target, rel: 'noopener' } : {}
        return (
          <a href={href} {...otherProps} {...targetProps}>
            {children}
          </a>
        )
      }}
    >
      {element}
    </PrismicProvider>
  )
}

React devtools (<PrismicProvider>):

React devtools (child accessing the PrismicContext):

[angeloashmore]

Hi @morellodev, this happens because gatsby-browser.js/gatsby-ssr.js are using require() while your pages are likely using import.

Using require() will point at @prismicio/react's CommonJS file, while import will use its ESM file. Each file has its own React context object. usePrismicContext() from the ESM file cannot "see" the PrismicProvider from the CommonJS file.

You can fix this by writing your gatsby-browser.js/gatsby-ssr.js using ESM syntax:

// gatsby-ssr.js and gatsby-browser.js

import * as React from 'react'
import { Link } from 'gatsby'
import { PrismicProvider } from '@prismicio/react'

import linkResolver from './linkResolver'

export const wrapRootElement = ({ element }) => {
  return (
    <PrismicProvider
      linkResolver={linkResolver}
      internalLinkComponent={({ href, children, ...otherProps }) => (
        <Link to={href} {...otherProps}>
          {children}
        </Link>
      )}
      externalLinkComponent={({ href, target, children, ...otherProps }) => {
        const targetProps = target ? { target, rel: 'noopener' } : {}
        return (
          <a href={href} {...otherProps} {...targetProps}>
            {children}
          </a>
        )
      }}
    >
      {element}
    </PrismicProvider>
  )
}

If this doesn't fix your issue, let me know and I'll reopen the issue. Thanks! 🙂

[morellodev]

Thank you @angeloashmore, I will try your fix and eventually I will come back here again 😃

[morellodev]

It worked! Thanks a lot 👍

[angeloashmore]

Glad to hear it's working! 😀