reactjs - Gatsby 本地插件构建崩溃
问题描述
我是 Gatsby 新手,我正在学习本教程:https : //www.gatsbyjs.com/docs/creating-plugins/ 学习使用react-intl
. 我将插件放在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'
WebpackError: [React Intl] Could not find required
当我构建 Gatsby 站点时,它因错误intl而崩溃object. <IntlProvider> needs to exist in the component ancestry.
但是当我将插件发布到 npm 时,它工作正常。
谁能帮我找出我的问题在哪里?
谢谢!
解决方案
wrapPageElement
您正在文件中第二次重新导出:
// gatsby-browser.js
export { wrapPageElement } from './src/wrap-page-element'
这取代了早期的导出,包括<IntlProvider />
.
推荐阅读
- amazon-web-services - 如何在 AWS 上设置 Web 套接字并将传入消息记录到 s3(弹性 beanstalk 项目)mysql db
- java - 需要帮助创建使用比较器的 ksmallest 方法吗?
- json - JQ - 如何连接两个数组,一个来自本地 json 的请求
- node.js - 首次请求域时出现 Nginx 屏幕
- javascript - 将 LocalStorage 对象传递给 Mounted 数据变量
- android - 如何更改应用中的默认语言 - Android Studio
- python - 在虚拟环境中安装自定义项目时导入名称失败
- javascript - 了解leet code most water问题的代码片段
- python - 如何修复我的代码以正确显示我的菜单?
- python - 计算python pandas中的系列数