Gatsby：WebpackError [React Intl] 找不到所需的 `intl` 对象。<IntlProvider> 需要存在于组件祖先中

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 .