如何解决Gatsby 本地插件构建崩溃
我是 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
intlobject. <IntlProvider> needs to exist in the component ancestry.
但是当我将插件发布到 npm 时,它工作正常。
谁能帮我找出我的问题在哪里?
谢谢!
解决方法
您正在第二次重新导出文件中的 wrapPageElement
:
// gatsby-browser.js
export { wrapPageElement } from './src/wrap-page-element'
这取代了包含 <IntlProvider />
的早期导出。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。