Gatsby: WebpackError [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry

Question

I'm using React Intl for internationalisation in my Gatsby app. The app runs fine as expected with npm start, but the build fails with an error during execution of npm run build command.

Code

// gatsby-browser.js

import React from "react"
import { IntlProvider } from "react-intl"

export const wrapRootElement = ({ element }) => (
  <IntlProvider locale="en" messages={{ en: {} }}>
    {element}
  </IntlProvider>
)

// src/pages/index.js

import React from "react"
import { useIntl } from "react-intl"

const IndexPage = () => {
  const intl = useIntl()

  return <p>index.js</p>
}

export default 

Error

The npm run build command fails with this error.

failed Building static HTML for pages - 0.193s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  74 |     if (Err === void 0) { Err = Error; }
  75 |     if (!condition) {
> 76 |         throw new Err(message);
     | ^
  77 |     }
  78 | }
  79 |


  WebpackError: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
  
  - utils.js:76 
    [gatsby-starter-default]/[@formatjs]/ecma402-abstract/lib/utils.js:76:1
  
  - utils.js:6 
    [gatsby-starter-default]/[react-intl]/lib/src/utils.js:6:14
  
  - useIntl.js:6 
    [gatsby-starter-default]/[react-intl]/lib/src/components/useIntl.js:6:25
  
  - index.js:5 
    gatsby-starter-default/src/pages/index.js:5:23
  
  - extends.js:3 
    [gatsby-starter-default]/[@babel]/runtime/helpers/extends.js:3:42
  
  - extends.js:2 
    [gatsby-starter-default]/[@babel]/runtime/helpers/extends.js:2:1
  
  - extends.js:13 
    [gatsby-starter-default]/[@babel]/runtime/helpers/extends.js:13:1
  
  - static-entry.js:286 
    gatsby-starter-default/.cache/static-entry.js:286:22
  
  - index.js:72 
    [gatsby-starter-default]/[@formatjs]/fast-memoize/lib/index.js:72:1
  

not finished Caching JavaScript and CSS webpack compilation - 6.623s
not finished Caching HTML renderer compilation - 0.243s

Answer 1

Gatsby Documentation Says

The APIs wrapPageElement and wrapRootElement exist in both the browser and SSR APIs. You generally should implement the same components in both gatsby-ssr.js and gatsby-browser.js so that pages generated through SSR with Node.js are the same after being hydrated in the browser.

Solution

As document suggests to implement wrapRootElement in both gatsby-ssr.js and gatsby-browser.js, I added the code in gatsby-ssr.js. It worked like charm and the build didn’t fail.

For an unknown reason, the IntlProvider context was getting lost during build time in SSR.