gatsby - gatsby-plugin-layout を追加した後に injectIntl​​ でエラーが発生する

Question

サイトを翻訳するためにintl、layout.js ファイルに次のように挿入しています。

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