injectIntl在添加gatsby插件布局后导致错误

为了翻译我的站点，我正在layout.js文件中注入

intl

：

import React from "react";
import { injectIntl } from "gatsby-plugin-intl";

const Layout = ({intl}) => (
    {intl.formatMessage({id: "history_text"})}
);

export default injectIntl(Layout)

但是在我将

gatsby插件布局添加到我的项目（基于）后，我得到了这个错误：

错误：[React Intl]找不到所需的'Intl'对象。需要存在于组件祖先中。

如何在保留翻译的同时消除此错误

这是相关的盖茨比配置部分：

{
    resolve: `gatsby-plugin-intl`,
    options: {
        path: `${__dirname}/src/locale`,
        languages: [`en`, `de`],
        defaultLanguage: `de`,
        redirect: false,
    },
},
{
    resolve: `gatsby-plugin-layout`,
    options: {
        component: require.resolve(`./src/components/layout.js`),
    },
},

gatsby plugin layout
和
gatsby plugin intl
都使用
wrapPageElement
API创建包装器

现在盖茨比中的插件是自上而下执行的，因此您需要在
gatsby plugin intl
之前定义
gatsby plugin layout
，以便盖茨比plugin intl使用的
IntlProvider
提供程序包装布局组件，并且它能够使用injectIntl HOC

{
    resolve: `gatsby-plugin-layout`,
    options: {
        component: require.resolve(`./src/components/layout.js`),
    },
},
{
    resolve: `gatsby-plugin-intl`,
    options: {
        path: `${__dirname}/src/locale`,
        languages: [`en`, `de`],
        defaultLanguage: `de`,
        redirect: false,
    },
},

gatsby plugin layout
和
gatsby plugin intl
都使用
wrapPageElement
API创建包装器

现在盖茨比中的插件是自上而下执行的，因此您需要在
gatsby plugin intl
之前定义
gatsby plugin layout
，以便盖茨比plugin intl使用的
IntlProvider
提供程序包装布局组件，并且它能够使用injectIntl HOC

{
    resolve: `gatsby-plugin-layout`,
    options: {
        component: require.resolve(`./src/components/layout.js`),
    },
},
{
    resolve: `gatsby-plugin-intl`,
    options: {
        path: `${__dirname}/src/locale`,
        languages: [`en`, `de`],
        defaultLanguage: `de`,
        redirect: false,
    },
},

你如何提供IntlProvider？@Shubhamkhattri我不知道-我的代码中从来没有标记，但翻译仍然有效。所以盖茨比插件intl和盖茨比插件布局都使用wrapPageElement API，你能提供盖茨比配置来查看它们是如何工作的吗used@ShubhamKhatri我从未听说过wrapPageElement API-thx 4信息，我将检查是否可以找到有关该API的任何有用信息。我在我的问题中添加了配置部分。你可以尝试更改插件的使用顺序。你如何提供IntlProvider？@ShubhamKhatri我不知道-我的代码中从来没有标记，但翻译仍然有效。因此盖茨比插件intl和盖茨比插件布局都使用wrapPageElement API，你能提供盖茨比配置来看看它们是怎样的吗used@ShubhamKhatri我从来没有听说过wrapPageElement API-thx 4的信息，我会检查一下是否能找到关于该API的有用信息。我在问题中添加了配置部分。您可以尝试更改插件的使用顺序。有没有办法提供更多信息？我尝试了和你一样的设置，我仍然得到同样的错误。我试图将布局组件拉到顶层，并将其应用到WraProoteElement函数中，我在布局组件中得到了一些带有useIntl钩子的组件-基本上，如果我在页面级别以上的任何位置使用布局，它都会抛出该错误。盖茨比插件布局和盖茨比插件内部顺序似乎没有任何区别error@NikitaTomkevich如果使用wraprotement将布局拉到intlProvider上，则会出现错误。如果您可以在一个单独的问题中提供更多关于您的设置的详细信息，可能会有所帮助，有没有办法提供更多信息？我尝试了和你一样的设置，我仍然得到同样的错误。我试图将布局组件拉到顶层，并将其应用到WraProoteElement函数中，我在布局组件中得到了一些带有useIntl钩子的组件-基本上，如果我在页面级别以上的任何位置使用布局，它都会抛出该错误。盖茨比插件布局和盖茨比插件内部顺序似乎没有任何区别error@NikitaTomkevich如果使用wraprotement将布局拉到intlProvider上，则会出现错误。如果您能在另一个问题中提供更多关于您的设置的详细信息，这可能会有所帮助