[GatsbyJS] This component must be used inside a <RecoilRoot> component error in build

I’m trying to use Recoil Js in a GatsbyJs application.

I configured <RecoilRoot> in wrapRootElement (also tried import { RecoilRoot } from 'recoil/dist/recoil.production' as suggested in this issue) but I receive this error during gatsby build script.

Am I missing something? How to use this lib in a GatsbyJs app?

[BayanBennett]

Just throwing this on here just in case anyone is stuck and they happen to have the same problem that I did.

❌Doesn’t work

module.exports = {
  wrapRootElement: ({ element }) =>
    createElement(RecoilRoot, null, element);
}

✔ Works

module.exports.wrapRootElement = ({ element }) =>
    createElement(RecoilRoot, null, element);

Also, to reduce duplication, you can do this in gatsby-browser.js:

module.exports.wrapRootElement = require("./gatsby-ssr").wrapRootElement

[luis-aguilar-raweng]

@risakanagawa For sure, hope this helps.

First, know that the gatsby-browser file “…lets you…wrap your site in additional components…” - https://www.gatsbyjs.com/docs/browser-apis. You need to wrap your root element to allow passing the recoil state, for example:

exports.wrapRootElement = ({ element }) => {
  
  return (
      <RecoilRoot>
         { element }
      </RecoilRoot>
  )
}

Second, if you have the gatsby-ssr file then you pretty much need to do the same since “…There is an equivalent hook in Gatsby’s Browser API. It is recommended to use both APIs together.” - https://www.gatsbyjs.com/docs/ssr-apis/