TypeError не может прочитать свойство undefined - Gatsby

Question

Я застрял с этой проблемой, и я не уверен, что не так. Я новичок в Гэтсби.

Я пытаюсь создать страницы из файла JSON. Я продолжаю получать эту ошибку

TypeError: Невозможно прочитать свойство 'Layout' из неопределенного

Вот данные и код JSON:

Файл JSON

{
    "Header" : {
        "TopMenu" : [
            {
                "url" : "/log-in",
                "name" : "Log in",
                "target" : "_self"
            },
            {
                "url" : "/about",
                "name" : "About",
                "target" : "_self"
            }
        ],
        "MainMenu" : [
            {
                "url" : "/",
                "name" : "Home",
                "target" : "_self"
            },
            {
                "url" : "/service",
                "name" : "Service",
                "target" : "_self"
            }
        ]
    },
    "Footer" : {
        "Links" : [
            {
                "url" : "/",
                "name" : "Home",
                "target" : "_self"
            },
            {
                "url" : "/service",
                "name" : "Service",
                "target" : "_self"
            },
            {
                "url" : "/blog",
                "name" : "Blog",
                "target" : "_self"
            }
        ]
    },
    "pages" : [
        {
            "name" : "Home",
            "content" : "This is the home page.",
            "url" : "/"
        },
        {
            "name" : "About",
            "content" : "This is the about page.",
            "url" : "/about"
        },
        {
            "name" : "Service",
            "content" : "This is the service page.",
            "url" : "/service"
        },
        {
            "name" : "Blog",
            "content" : "This is the blog page.",
            "url" : "/blog"
        }
    ]
}

Гэтсби-node.js

exports.createPages = ({actions}) => {
    const {createPage} = actions
    const pageData = JSON.parse(fs.readFileSync('./content/data.json', { encoding: 'utf-8' }));
    const pageTemplate = path.resolve('src/templates/page.js');

    pageData.pages.forEach(page => {
        createPage({
          path: page.url,
          component: pageTemplate,
          context: {
            Layout : {
                Header : pageData.Header,
                Footer : pageData.Footer
            },
            ...page,
          }
        });
      });
}

ЦСИ / шаблон / page.js

import React from "react"
 const Page = props => {
    const { Layout = null, name = null, content = null, url = null } = props.PageContext;

    return (
      <React.Fragment>
        <MainLayout headerLayout={Layout.Header} footerLayout={Layout.Footer}>
            {content}
        </MainLayout>
      </React.Fragment>
    );
  };

export default Page;

Гэтсби-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        //icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    }
  ]
}

EDIT: Добавлен gatsby-config.js

Любая помощь очень ценится.

Answer 1

У тебя там опечатка. В src/template/page.js это должно быть props.pageContext вместо props.PageContext. PageContext не определено, следовательно, ошибка типа.

    const {
      Layout = null,
      name = null
      content = null,
      url = null 
-   } = props.PageContext;
+   } = props.pageContext;