injectIntl ​​вызывает ошибку после добавления gatsby-plugin-layout

Question

Чтобы перевести мой сайт, я добавляю intl, например, в свой макет. js file:

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

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

export default injectIntl(Layout)

Но после того, как я добавил gatsby-plugin-layout в свой проект (на основе этот пример ) Я получаю эту ошибку:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

Как мне избавиться от этой ошибки, сохраняя мои переводы?

Это соответствующая конфигурация gatsby часть:

{
    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`),
    },
},

Answer 1

gatsby-plugin-layout и gatsby-plugin-intl оба используют wrapPageElement API для создания оболочки.

Теперь плагины в gatsby выполняются сверху вниз, и поэтому вам нужно определить gatsby-plugin-layout перед gatsby-plugin-intl, чтобы поставщик IntlProvider, используемый gatsby-plugin-intl, обернул компонент Layout и мог использовать injectIntl ​​HO C

{
    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,
    },
},