错误 #11322 - 您网站的“gatsby-node.js”创建了一个页面，但没有将路径传递给组件答案

【问题标题】：Error #11322 - Your site's "gatsby-node.js" created a page and didn't pass the path to the component错误 #11322 - 您网站的“gatsby-node.js”创建了一个页面，但没有将路径传递给组件
【发布时间】：2021-06-03 09:32:04
【问题描述】：

我是编程新手，这是我的第一个项目。

我正在按照本教程 https://www.youtube.com/watch?v=NkFz2psDupw 添加来自 contentful 的博客文章，但是当我尝试运行 gatsby develop 时出现以下错误：

Your site's "gatsby-node.js" created a page and didn't pass the path to the component.

The page object passed to createPage:
{
    "path": "automate-with-webhooks",
    "components": "E:\\Documents\\Projects\\test\\src\\templates\\blog-post.js",
    "context": {
        "slug": "automate-with-webhooks",
        "previous": {
            "slug": "hello-world",
            "title": "Hello world"
        },
        "next": null
    }
}

这是我的代码：

gatsby-node.js

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions

    const blogPost = path.resolve(`./src/templates/blog-post.js`)
    return graphql(
        `
            {
                allContentfulBlogPost(filter: {node_locale: {eq: "en-CA"}}) {
                    edges {
                        node {
                            slug
                            title
                        }
                    }
                }
            }
        `
    ).then(result => {
        if (result.errors) {
            throw result.errors
        }

        // Create blog posts pages.
        const posts = result.data.allContentfulBlogPost.edges

        posts.forEach((post, index) => {
            const previous = index === posts.length - 1 ? null : posts[index + 1].node
            const next = index === 0 ? null : posts[index - 1].node

            createPage({
                path: post.node.slug,
                components: blogPost,
                context: {
                    slug: post.node.slug,
                    previous,
                    next,
                },
            })
        })
    })
}

blog-post.js

import React from "react"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const BlogPostTemplate = ({ data, location }) => {
  const post = data.contentfulBlogPost
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data

  return (
    <Layout location={location} title={siteTitle}>
      <SEO
        title={post.title}
        description={post.description}
      />
      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{post.title}</h1>
          <p>{post.publishDate}</p>
        </header>
        <section
          dangerouslySetInnerHTML={{ __html: post.body.childMarkdownRemark.html }}
          itemProp="articleBody"
        />
        <hr />
        <footer>
        </footer>
      </article>
      <nav className="blog-post-nav">
        <ul
          style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          <li>
            {previous && (
              <Link to={previous.slug} rel="prev">
                ← {previous.title}
              </Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={next.slug} rel="next">
                {next.title} →
              </Link>
            )}
          </li>
        </ul>
      </nav>
    </Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query ContentfulBlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    contentfulBlogPost( slug: { eq: $slug }) {
      title
      publishDate
      author {
        company
      }
      description {
        childMarkdownRemark {
          html
        }
      }
      heroImage {
        fluid {
          src
        }
      }
      body {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`

【问题讨论】：

标签： reactjs content-management-system gatsby contentful

【解决方案1】：

这里有内容的 DevRel。 ?

这可能是一个很长的尝试，但对我来说，您的createPage 通话中似乎有错字。

createPage({
  path: post.node.slug,
  // it's `component` and not `components`
  component: blogPost,
  context: {
    slug: post.node.slug,
    previous,
    next,
  },
})

我没有测试它，但the Gatsby documentation I found 建议component。

【讨论】：