Gatsby 本地插件构建崩溃

Question

我是 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 required intl object. <IntlProvider> needs to exist in the component ancestry. object. <IntlProvider> needs to exist in the component ancestry.

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

谁能帮我找出我的问题在哪里？

谢谢！

Answer 1

您正在文件中第二次重新导出wrapPageElement ：

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

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