I want to use gatsby.js and strapi v3 to create pagination. But I get an error and can't make it. gatsby-awesome-pagination

Question

https://blakey.co/blog/pagination-with-strapi-and-gatsby I copied and pasted the code from this site.

My strapi collection is Post,Category

allStrapiArticle ⇨ allStrapiPost

I made it exactly as shown on this page. However, I got the following error

ERROR #11325 Your site's "gatsby-node.js" created a page with a component that doesn't exist.
The path to the missing component is "/Users/t/WebDevelopment/xxxxx/src/templates/article.js" The page object passed to createPage: { "path": "/blog/ukraine-national-guards-man-shoots-up-weapons-factory", "component": "/Users/t/WebDevelopment/xxxxx/src/templates/article.js", "context": { "id": "Post_2", "slug": "ukraine-national-guards-man-shoots-up-weapons-factory" } }

See the documentation for the "createPage" action — https://www.gatsbyjs.com/docs/reference/config-files/actions#createPage

not finished createPages - 0.036s

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
[email protected] develop: gatsby develop npm ERR! Exit status 1
npm ERR! npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/t/.npm/_logs/2022-02-01T07_06_11_359Z-debug.log

file structure [![enter image description here][1]][1]

gatsby-node.js

const path = require(`path`)
const { paginate } = require('gatsby-awesome-pagination');

const makeRequest = (graphql, request) =>
  new Promise((resolve, reject) => {
    resolve(
      graphql(request).then(result => {
        if (result.errors) {
          reject(result.errors)
        }

        return result
      })
    )
  })

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

  // Get our articles
  const getPost = makeRequest(
    graphql,
    `
    {
      allStrapiPost{
        edges {
          node {
            id
            slug
          }
        }
      }
    }
    `
  ).then(result => {
    // Create pages for each article.
    result.data.allStrapiPost.edges.forEach(({ node }) => {
      createPage({
        path: `/blog/${node.slug}`,
        component: path.resolve(`src/templates/article.js`),
        context: {
          id: node.id,
          slug: node.slug,
        },
      })
    })

    // Create pagination
    paginate({
      createPage, 
      items: result.data.allStrapiPost.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/archives', 
      component: path.resolve('src/templates/blog-archive.js')
    })
  })

  // Query for articles nodes to use in creating pages.
  return getPost
}