3 Replies
Hi @Hùng Lê. 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 knowledge sources, there are several issues that can cause NuxtImg to not work properly when using pnpm as your package manager. These issues are primarily related to how pnpm handles dependencies.
Common Issues with NuxtImg and pnpm
1. Missing Dependencies: When using pnpm, dependencies of modules might not be hoisted correctly, causing "module not found" errors. This is particularly evident in the Github issues where users reported problems with dependencies not being found when using pnpm Github Issue #31414.
2. shamefully-hoist Flag: Several users have reported that NuxtImg and other Nuxt modules don't work properly with pnpm unless you use the
shamefully-hoist=true flag. This is mentioned in Github Issue #31340 where a user noted that builds break when using shamefully-hoist=true in Nuxt 3.16.
3. Sharp Package Issues: NuxtImg relies on the Sharp package for image processing, and there can be issues with Sharp when using pnpm, especially in production environments. As noted in a Stack Overflow post, you might need to rebuild Sharp with the correct architecture parameters Stack Overflow Post.
Solutions
1. Use shamefully-hoist Flag: Add shamefully-hoist=true to your .npmrc file to ensure dependencies are properly hoisted.
2. Rebuild Sharp for Production: If you're deploying to a Linux server, you might need to run:
after installing the Sharp package to add Linux binary files for production mode.
3. Check Module Versions: Ensure you're using the correct version of @nuxt/image for your Nuxt version. For Nuxt 3, use v1.x, and for Nuxt 2, use v0.x Installation Guide.
4. Proper Configuration: Make sure your nuxt.config.ts file has the correct image configuration, especially if you're storing images in the assets directory rather than the public directory:
If you're still experiencing issues, you might want to consider using npm or yarn as an alternative package manager for your Nuxt project, as they tend to have fewer compatibility issues with Nuxt modules.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@395818224114991104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I overwrite the sharp version on package.json that helped to fix the compability issue with 3.15/3.16...
for example package.json