Gatsby Error: Your site's “gatsby-node.js” created a page and didn't pass the path to the component

Question

I coult only find one other post on stackoverflow on this question. Any help would be great! I have been following the tutorial here to try to use Gatsby with GraphQL. But I keep getting the error:

ERROR #11322

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": "/blog/technical-seo-with-graphcms", "componenent": "/Users/ela/Yao/Dev/paper-plane-project/src/templates/BlogPosts.js", "context": { "post": { "id": "ckadrcx4g00pw01525c5d2e56", "title": "Technical SEO with GraphCMS", "slug": "technical-seo-with-graphcms", "tags": [ "SEO" ], "author": { "id": "ckadqepn400gv0108p4debydk", "name": "Jesse Martin" } } } }

Here is my gatsby-node.js:

const path = require(`path`);

exports.createPages = async({graphql, actions: {createPage}}) => {
    const {data: {gcms : { posts }}} = await graphql(`
     query {
        gcms {
            posts (stage: PUBLISHED) {
                id
                title
                slug
                tags
                author {
                    id
                    name
                }
            }
        }
    }
    `);

    // const posts = pageQuery.data.gcms.posts

    const blogTemplates = {
        Article: path.resolve('./src/templates/BlogPosts.js'),
      }

    posts.forEach(post => createPage({
        path: `/blog/${post.slug}`,
        componenent: blogTemplates.Article,
        context : {
            post : post,
        }
    })
  );
}

And Here is my BlogPosts.js template file:

import React from 'react';
import { graphql } from 'gatsby';

const BlogPosts = (props) => {
    const { post } = props.post;
    return (
        <React.Fragment>
            <h1>{post.title}</h1>
        </React.Fragment>    
    
)};

export default BlogPosts;

Any help would be awesome. I truly cannot find anything on the web for this error.

Answer 1

You have a typo in your createPage function. You typed componenent instead of component. Should be:

posts.forEach(post => createPage({
    path: `/blog/${post.slug}`,
    component: blogTemplates.Article,
    context : {
        post : post,
    }
})

In addition, if you check the repository provided in the tutorial you mentioned you can find the full configuration.