Await is only allowed within async functions and at the top levels of modules
After upgrading nuxt to 4.1.3 or newer, using @nuxtjs/strapi module from layer gets this error
Downgrading to 4.1.2 all works as expected.
Using with 4.1.3+ version in layer also works as expected. Only problem, when i am using it from layer.
2 Replies
Hi @Alex92. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information in the knowledge sources, your issue appears to be related to changes in Nuxt 4.1.3+ that affect how composables and modules are loaded and executed, especially in layered setups.
Key points from the sources:
- In Nuxt, composables (like those used by modules such as @nuxtjs/strapi) must be called synchronously and in the correct context. You cannot use await before calling a composable unless you are inside a
The error is likely due to stricter enforcement of composable usage context and the corrected module loading order in Nuxt 4.1.3+. Downgrading to 4.1.2 works because the old (incorrect) behavior is still present. To fix this for 4.1.3+, refactor your code to ensure composables are called synchronously and in the right context, especially in layers Vue and Nuxt Composables, Corrected Module Loading Order in Layers. If you need more specific guidance, please provide a code snippet or more details about where and how you are using await and the @nuxtjs/strapi composable in your layer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<script setup>, a setup function of a component declared with defineNuxtComponent, defineNuxtPlugin, or defineNuxtRouteMiddleware. This is enforced to ensure the Nuxt app context is available and to avoid errors like "Nuxt instance is unavailable" or syntax errors about await usage outside async functions or top-level modules. This rule is documented and has caused issues when not followed, especially after Nuxt upgrades that tighten these requirements Vue and Nuxt Composables.
- Nuxt 4.1.3 introduced a corrected module loading order in layers: now, modules from layers are loaded before project modules, which may affect how and when composables and modules are initialized. If your code or a module (like @nuxtjs/strapi) in a layer was relying on the previous (incorrect) order, this could cause issues, especially if composables are called in a way that is no longer valid Corrected Module Loading Order in Layers.
- The error "Await is only allowed within async functions and at the top levels of modules" typically means that an await is being used outside of an async function, or in a context where Nuxt's transforms do not apply (such as in a layer module, or outside the allowed places). This could be triggered by changes in how Nuxt processes layers and modules in 4.1.3+.
- There are multiple reports of issues with composables, modules, and context after upgrading to 4.1.3+, especially in layered setups. Some users found that downgrading to 4.1.2 resolved their issues, and that the problems only appeared when using modules from a layer, not from the main project Github Issue: defineNuxtConfig is not defined on nuxt 4.1.3, Corrected Module Loading Order in Layers.
What you can do:
- Review your usage of await and composables in your layer modules. Ensure that any await is only used inside async functions, and that composables are called synchronously and in the correct context.
- If you are using await before a composable in a layer, refactor your code to avoid this pattern.
- If your code worked before due to the previous (incorrect) module loading order, you may need to adjust your module initialization or configuration to match the new, correct order.
- If you need to use async composables in more flexible ways, consider enabling the experimental asyncContext feature in your Nuxt config, though this is still experimental and may not resolve all issues.
Summary:The error is likely due to stricter enforcement of composable usage context and the corrected module loading order in Nuxt 4.1.3+. Downgrading to 4.1.2 works because the old (incorrect) behavior is still present. To fix this for 4.1.3+, refactor your code to ensure composables are called synchronously and in the right context, especially in layers Vue and Nuxt Composables, Corrected Module Loading Order in Layers. If you need more specific guidance, please provide a code snippet or more details about where and how you are using await and the @nuxtjs/strapi composable in your layer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@641916049968726026> Kapa.ai is still learning and improving, please let me know how I did by reacting below.