nuxt generate throws error for dynamic page nuxt.js

Question

I can not seem to figure out what the issue is here...

I have created a blog with pagination using nuxt.js now in my nuxt.config.js I have a method that gets the posts from contentful like so

const getBlogPosts = async () => {
  let blogPosts = await client.getEntries({ order: '-sys.createdAt', limit: 1000, content_type: config.CTF_BLOG_POST });
  return blogPosts;
};

then when I generate the routes I do the following...

generate: {
    routes: async () => {
      const posts = await getBlogPosts();
      const routes = [];
      let postsNum = Math.ceil(posts.items.length / 10); // get the page numbers
      for (let i = 1; i <= postsNum; i++) {
        routes.push({
          route: '/page/' + i,
          payload: {
            data: posts.items.splice(i === 1 ? 0 : i * 10, 10)
          }
        });
      }
      return routes;
    }
  },

then in my _page/index.vue

<script>
export default {
    components: {
     //...
    },
    aysnc asyncData(context) {
        if(context.payload) {
            return {
                blogPosts: context.payload.data.items.slice(0, 8)
            }
        } else {
            //...
        }
    }
}
</script>

now when Im running this locally the page works fine no errors etc.. but on nuxt generate I get

ERROR: Error generating /page/1

now I've tried to console.log() the blogPosts on mounted() but It never fires.

I can not figure out what is wrong here, Ive tried to strip back everything and made my _page/index.vue to look like this

<template>
    <div>
        <h1>hello</h1>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

but I still get the generate error I've console.log() routes and I get this

[                                                                                                 11:39:44  
  {
    route: '/page/1',
    payload: {
      data: [Array]
    }
  }
]

which looks correct, so why is the page erroring??

edit 1

When I check my dist folder the page 1 index.html is there but in the html it says this page could not be found

any help would be appreciated thanks or is there a way to get a better error message

edit 2

All of my individual blog pages build correctly, but the actual /page/1 is the only one that is failing I have put a try catch around the whole async generate method and there are no errors.. also If I console.log all the routes it appears as if it is all correct

[                                                                                                 08:58:38
  {
    route: '/blog/6gQUEUwex7mjNtAXY4ZlTO',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/2xDAv0zSt4kUfxOV1XC98C',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/6f6shGDflvuBUMZn25sIbE',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/24Sov29BazGj52WEQdJGiy',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/r2ky97Vg8u6rouiVXdSzd',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/2QnIl7GOScQ31A7EcRVgT1',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/1bEUOT5Xnm7CU9Njd5xkeu',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/blog/7FUON1DcQcGQnvdp7Kxfbe',
    payload: {
      data: [Object]
    }
  },
  {
    route: '/page/1',
    payload: {
      data: [Array]
    }
  }
]

all of the other pages are generated correctly

Answer 1

I am an idiot..

The route that needed to be generated was /blog/page/1 not /page/1

so I updated this

for (let i = 1; i <= postsNum; i++) {
  routes.push({
    route: '/blog/page/' + i,
    payload: {
      data: posts.items.splice(i === 1 ? 0 : i * 10, 10)
    }
  });
}

Once that was fixed.. it built correctly!

Make sure to triple check your generated route names...