[Need Non-AI Help] `nuxt generate` returns error when used with NuxtPicture and `avif,webp` format
I am using
@nuxt/icon module to optimize image files located under public/ as it's been stated in the documentation. I was using <NuxtImg> and configured the modules as seen below
which worked fine but I figured out that it does not change/transform the image itself to avif or webp.
I found out that I should use <NuxtPicture> for that to be available, which I did exactly that.
Now here is the problem;
When I am generating the static files of the website I am getting the following error.
Full error can be found as attachement.9 Replies
Hi @Zamion101. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error
Make sure you do not have
If you must use
The
If you only need a single format,
The error is likely due to either SSR being disabled or missing explicit prerendering of image routes when using multiple formats with
[nuxt] instance unavailable during nuxt generate when using <NuxtPicture> with multiple formats (avif,webp) is related to how Nuxt's static image optimization works during prerendering. This error typically occurs when the Nuxt instance (which provides access to composables like useNuxtApp or $img) is not available in the context where the image processing is attempted during static generation.
From the knowledge sources:
- Nuxt Image can optimize and save images locally during static generation with nuxt generate, but this requires server-side rendering (ssr: true). If SSR is disabled (ssr: false), Nuxt Image cannot optimize images at build time unless you explicitly prerender the image routes using nitro.prerender.routes in your nuxt.config file. If you don't do this, image optimization will fail during generation, which can lead to errors like the one you are seeing Optimizing images for static websites.
- The error stack trace shows the failure happens inside the image optimization logic, specifically when trying to generate multiple formats for <NuxtPicture>. This is consistent with the need for a Nuxt instance during SSR/static generation.
- The Nuxt Image documentation also notes that the default provider (ipx) expects images to be in the public/ directory, and that image transformation (to formats like avif and webp) is handled automatically by <NuxtPicture> if the provider and configuration support it Providers, NuxtPicture usage.
What you can try:
1. Ensure SSR is enabledMake sure you do not have
ssr: false in your nuxt.config. SSR must be enabled for Nuxt Image to optimize images during static generation.
2. Explicitly prerender image routes (if SSR is disabled)If you must use
ssr: false, you need to manually add the image routes to nitro.prerender.routes so Nuxt knows to generate those images:
Optimizing images for static websites
3. Check your provider configurationThe
ipxStatic provider is not mentioned in the official documentation; the default is ipx. Make sure you are using a supported provider and that your images are in the correct directory (public/). If you use a custom provider, ensure it is correctly set up Providers.
4. Use <NuxtImg> for single formatIf you only need a single format,
<NuxtImg> works without issues, as you have observed. <NuxtPicture> is for serving multiple formats, but it relies on the same underlying image optimization logic.
Summary:The error is likely due to either SSR being disabled or missing explicit prerendering of image routes when using multiple formats with
<NuxtPicture>. Enable SSR or add the required image routes to nitro.prerender.routes to resolve the issue.
If you continue to see the error after these changes, the knowledge sources do not provide further troubleshooting steps for this specific error, and you may need to consult the Nuxt or Nuxt Image issue trackers for more details.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@117331106868625411> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai
Server-Side Rendering in my
nuxt.config.ts file is not defined and it's by defalt true. So I am sure SSR is active and available to use.
I have changed ipxStatic to ipx and tried to generate again but still getting the same error message.
I want to generate avif and webp files to optimize image delivery for mobile users, so it will be preferable to use <NuxtPicture>.Let me check the knowledge base for you again. One moment! :books:
----------------------
Given your configuration (SSR enabled, images in
public/, using the ipx provider, and <NuxtPicture> with avif,webp formats), you are following the documented approach for static image optimization in Nuxt Image. However, you are still encountering the [nuxt] instance unavailable error during nuxt generate.
Based on the knowledge sources, here’s what is confirmed:
- SSR must be enabled for Nuxt Image to optimize images during static generation, which you have already ensured Optimizing images for static websites.
- Images should be in the public/ directory when using the default ipx provider Providers.
- <NuxtPicture> is the correct component to generate and serve multiple formats like avif and webp NuxtPicture usage.
However, the knowledge sources do not provide a direct solution or explanation for the [nuxt] instance unavailable error when all of the above conditions are met. The error appears to be internal to the Nuxt Image module’s static generation process, possibly related to how it handles multiple formats or the $img helper during prerendering.
What is clear from the documentation:
- If SSR is enabled and images are in public/, static generation should work and output optimized images in the requested formats.
- There is no mention of additional required configuration for <NuxtPicture> with multiple formats beyond what you have already done.
Limitations:
- The knowledge sources do not explicitly address this specific error when using <NuxtPicture> with avif,webp and the ipx provider during static generation.
- There are no documented workarounds or troubleshooting steps for this scenario beyond what you have already tried.
Recommendation:
Since you are following the documented setup and still encountering this error, it may be a bug or an edge case not covered in the documentation. The best next step, as suggested in the troubleshooting section, is to open an issue on the Nuxt Image GitHub repository with your configuration, error trace, OS, Node version, and package manager details for further assistance Installation Troubleshooting.
I'm sorry, but the knowledge sources do not contain enough information to resolve this specific error beyond the steps you have already taken.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@117331106868625411> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Am I using the component wrong?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, your usage of the
You are not using the component incorrectly according to the official documentation. The issue you are experiencing is not due to incorrect usage of
<NuxtPicture> component appears correct:
- The src prop points to an image in the public/ directory, which is the recommended location for images when using the default ipx provider Providers.
- The alt attribute is correctly provided, which is recommended for accessibility NuxtImg usage.
- The class, placeholder, and preload props are valid and supported NuxtPicture usage.
The documentation states that <NuxtPicture> is a drop-in replacement for the native <picture> tag and its usage is almost identical to <NuxtImg>, supporting the same props NuxtPicture usage.
Summary:You are not using the component incorrectly according to the official documentation. The issue you are experiencing is not due to incorrect usage of
<NuxtPicture>, but likely relates to an internal problem during static generation, as previously discussed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@117331106868625411> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
could you provide a minimal repro in stackblifz or something