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

Question

我在我的 Gatsby 应用程序 中使用 React Intl 进行国际化。该应用程序在 npm start 下按预期运行良好，但在执行 npm run build 命令期间构建失败并出现错误。

代码

// 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

错误

npm run build 命令失败并出现此错误。

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 文档说

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.

解决方案

正如文档建议在 gatsby-ssr.js 和 gatsby-browser.js 中实现 wrapRootElement，我在 gatsby-ssr.js 中添加了代码。它工作得很好，构建没有失败。

由于未知原因，IntlProvider 上下文 在 SSR 构建时间 期间丢失.

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

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

javascript

webpack

gatsby

react-intl

formatjs

代码

错误

Gatsby 文档说

解决方案