Skip to content

🐛 [Bug]: useAsyncStoryblok causing ENAMETOOLONG during prerender build in Nuxt 3/4 #387

@johnjenkins

Description

@johnjenkins

Package

@storyblok/nuxt

Bug Description

https://github.com/storyblok/monoblok/blob/main/packages/nuxt/src/runtime/composables/useAsyncStoryblok.ts#L100 'Stringifies' the whole options / config blob and uses it as a cache-key. Nuxt, during an SSR production build will attempt to pre-render endpoints for performance but will fail to do so as the cache keys are too long.
Because we have a common / shared entry point for many pages (which resolves a lot of relations) - this results in 100s of build errors for our application:

ERROR  [unhandledRejection] ENAMETOOLONG: name too long, open '/app/node_modules/.cache/nuxt/.nuxt/cache/nitro/prerender/shared_{"language"_"en","resolve_links"_"url","resolve_relations"_["conference-presentation-talk.tags","conference-presentation.tags","content-mini-nav.navigation","event-speakers-item.existing_speaker","extraction-method-group.protocols","featured-content-item.content","header-mini-nav.navigation","linked-resources.content","module-reference.module_to_reference","ond-document.content_type","ond-document.use_case","page-applications.content","page-blog-post.category","page-blog-post.content_author","page-blog-post.tags","page-channel-partner-list.featured_partner","page-content-landing.default_search_categories","page-content-landing.default_search_tags","page-featured-items.tags","page-map-directory.featured_listing","page-news-article.category","page-news-article.tags","page-ond-documentation.tags","page-partner-directory.featured_listing","page-resource.category","page-resource.conference_agenda","page-resource.content_author","page-resource.related_event","page-resource.tags","page-product-item.menu","product-link.product","search_filters.filters","section-reference.section_to_reference","slide-event-reference.event","signpost.curated_items","step.consumables","step.equipment","step.materials","step.optional_equipment","step.snippets","tag-elements.tag"]}_about_contact'

If that looks unreasonable, the upper limit is 256 characters which is very small - something like:

/app/node_modules/.cache/nuxt/.nuxt/cache/nitro/prerender/shared_{"language"_"en","resolve_links"_"url","resolve_relations"_["conference-presentation-talk.tags","conference-presentation.tags","content-mini-nav.navigation","event-speakers-item.existing_speaker"]}

Steps to Reproduce

  1. Setup a nuxt application
  2. Setup a common [...slug].vue entry point
  3. Call useAsyncStoryblok() with a certain length of resolve_relations (anything that will push the resulting file name to above 256 characters).
  4. nuxt build

Expected Behavior

the cache key should be shortened ( / hashed?) to an upper limit of 50 characters (to cope with everyone's directory structure).
I'd be happy to make a PR but would like to have some official steer regarding the preferred way forward.

Actual Behavior

ENAMETOOLONG errors

Code Sample

// app/pages/[...slug].vue 
...
const { story, error } = await useAsyncStoryblok('/some-path', {api: { language: 'en', resolve_links: 'url', resolve_relations: ["conference-presentation-talk.tags","conference-presentation.tags","content-mini-nav.navigation","event-speakers-item.existing_speaker","extraction-method-group.protocols","featured-content-item.content","header-mini-nav.navigation","linked-resources.content","module-reference.module_to_reference"]}}
...

Environment

System:
    OS: macOS 15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 50.03 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.11.0 - /Users/John.Jenkins/.volta/tools/image/node/24.11.0/bin/node
    Yarn: 1.22.19 - /Users/John.Jenkins/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 11.6.1 - /Users/John.Jenkins/.volta/tools/image/node/24.11.0/bin/npm
    pnpm: 10.21.0 - /Users/John.Jenkins/.volta/tools/image/pnpm/10.21.0/bin/pnpm
    Watchman: 2024.07.08.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 142.0.7444.176
    Firefox: 145.0
    Safari: 18.5
    Safari Technology Preview: 26.0
  npmPackages:
    @storyblok/nuxt: ^8.2.1 => 8.2.2 
    nuxt: ~4.1.3 => 4.1.3

Error Logs

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions