Gatsby 本地插件构建崩溃答案

【问题标题】：Gatsby Local Plugin Build CrashGatsby 本地插件构建崩溃
【发布时间】：2021-06-07 22:10:23
【问题描述】：

我是 Gatsby 新手，我正在学习本教程：https://www.gatsbyjs.com/docs/creating-plugins/ 学习使用 react-intl 创建 gatsby 本地插件。我把插件放在项目根目录下的plugins文件夹中。

这是插件的演示代码（Demo Project Repo：https://github.com/85Ryan/gatsby-local-plugin-demo.git）

// ./src/wrap-page-element.js
import * as React from 'react'
import { IntlProvider } from 'react-intl'

const message = {
  welcome: 'Welcome',
  home: 'Home',
}

const wrapPageElement = ({ element }) => {
  const locale = 'en'
  return (
    <IntlProvider locale={locale} key={locale} messages={message}>
      {element}
    </IntlProvider>
  )
}

export { wrapPageElement }


// gatsby-browser.js
export { wrapPageElement } from './src/wrap-page-element'

// gatsby-ssr.js
export { wrapPageElement } from './src/wrap-page-element'

当我构建 Gatsby 网站时，它崩溃并显示错误 WebpackError: [React Intl] Could not find requiredintlobject. <IntlProvider> needs to exist in the component ancestry.

但是当我将插件发布到 npm 时，它工作正常。

谁能帮我找出问题所在？

谢谢！

【问题讨论】：

标签： reactjs gatsby react-intl gatsby-plugin

【解决方案1】：

您在文件中再次导出wrapPageElement：

// gatsby-browser.js
export { wrapPageElement } from './src/wrap-page-element'

这将替换包含<IntlProvider /> 的早期导出。

【讨论】：

您好，谢谢！你能更详细地解释一下吗？不是很懂……
只有一个导出。您正在导出两个不同的东西作为导出。这就像有两个第一名的比赛冠军。这里没有关系。您可以更新代码以将 <IntlProvider> 包含在 wrapPageElement 导出到 ./src/wrap-page-element 文件中，或者如果您不使用该组件，则可以删除我在答案中突出显示的行。