Cannot generate pre-rendered static pages within Storyblok folders in Nuxt3 (Static site generation)

Question

I'm building a static site in Nuxt3 and using Storyblok CMS. The site will prerender stories (pages) that are in the root level of the CMS, but when it comes to prerendering stories within subfolders in storyblok CMS, I have to prerender them, so I am following the Storyblok instructions exactly on their website here to do this, copying their code into my nuxt.config.js file, but unfortunately I can't seem to get it to work.

It basically outputs this error when I try to generate: (undefinedms) (TypeError: route.split is not a function)

Here is the code in my nuxt.config.js file:

const axios = require('axios')

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: true,
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: [
    ["@storyblok/nuxt", { accessToken: process.env.STORYBLOK_ACCESS_TOKEN, }]
    // ...
  ],
  app: {
    head: {
      htmlAttrs: {
        lang: 'en',
      },
    }
  },
  generate: {
    routes: function (callback) {
      const token = process.env.STORYBLOK_ACCESS_TOKEN
      const per_page = 10
      const version = 'published'
      let cache_version = 0
   
      let page = 1
   
      // other routes that are not in Storyblok with their slug.
      let routes = ['/'] // adds home directly but with / instead of /home
   
      // Load space and receive latest cache version key to improve performance
      axios.get(`https://api.storyblok.com/v1/cdn/spaces/me?token=${token}`).then((space_res) => {
   
        // timestamp of latest publish
        cache_version = space_res.data.space.version
   
        // Call first Page of the Stories
        axios.get(`https://api.storyblok.com/v1/cdn/stories?token=${token}&version=${version}&per_page=${per_page}&page=${page}&cv=${cache_version}`).then((res) => {
   
          res.data.stories.forEach((story) => {
            if (story.full_slug != 'home') {
              routes.push('/' + story.full_slug)
            }
          })
   
          // Check if there are more pages available otherwise execute callback with current routes.
          const total = res.headers.total
          const maxPage = Math.ceil(total / per_page)
          if (maxPage <= 1) {
            callback(null, routes)
            return;
          }
   
          // Since we know the total we now can pregenerate all requests we need to get all stories
          let contentRequests = []
          for (let page = 2; page <= maxPage; page++) {
            contentRequests.push(axios.get(`https://api.storyblok.com/v1/cdn/stories?token=${token}&version=${version}&per_page=${per_page}&page=${page}`))
          }
   
          // Axios allows us to exectue all requests using axios.spread we will than generate our routes and execute the callback
          axios.all(contentRequests).then(axios.spread((...responses) => {
            responses.forEach((response) => {
              response.data.stories.forEach((story) => {
                if (story.full_slug != 'home') {
                  routes.push('/' + story.full_slug)
                }
              })
            })
   
            callback(null, routes)
          })).catch(callback)
        })
      })
    }
  }
})

When I try to generate the pages using sudo npx nuxi generate it will generate the root pages but will not generate the stories in the subfolders with this error:

(undefinedms) (TypeError: route.split is not a function)

It seems to do this regardless of what I try in the generate function. And what's puzzling is that there seems to be no route.split function anywhere. Could it be to do with axios?

Here is the link to the storyblok instructions if you want to check this out: https://www.storyblok.com/faq/how-to-generate-routes-for-nuxt-js-using-storyblok

Cannot generate pre-rendered static pages within Storyblok folders in Nuxt3 (Static site generation)

0 Answers0