Can't seem to deploy because of size limits in Vercel and Netlify
I'm not sure what I'm doing wrong but when I try to deploy to Vercel (or Netlify), my build always fails because of the 250MB size limit. I'm not sure why it reaches this amount. When I build locally the size is 69.9MB. It's probably because of the node_modules which seems to be 114MB (see image), I'm not sure if this is normal, I have a quite a few packages that I use but not excessive, it's mostly Prisma and Sharp that take up the space. I tried to remove some dependencies but it didn't work. Does anyone have any tips to deploy this?
5 Replies
Hi @JordyTack. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand your frustration with deployment failures due to size limits on Vercel and Netlify. This is a common issue with Nuxt applications, especially when using packages like Prisma and Sharp.
Understanding the Issue
The problem you're experiencing is related to memory usage during the build process, not necessarily the final output size. When you build locally, your final output is 69.9MB, but during deployment, the build process itself might be consuming more resources than the platforms allow.
Common Causes
1. Memory issues with Sharp: The Sharp image processing library is known to cause deployment problems, especially on Linux-based deployment environments. As seen in one of the knowledge sources, Sharp requires specific platform binaries that might not be properly installed during deployment.
2. JavaScript heap out of memory: This is a common error when building large Nuxt applications, as shown in the Netlify deployment error: "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory" Github Issue #21023.
3. Tailwind CSS: If you're using Tailwind CSS version 4.0.10 or newer, there have been reports of significantly increased build times and resource usage Github Issue #31304.
Solutions to Try
1. Fix Sharp for production:
If you're using Sharp, you might need to rebuild it for your target platform:
This solution was mentioned in a Stack Overflow post for fixing Sharp-related deployment issues.
2. Optimize your build process:
- Consider using dynamic imports to code-split your application
- Use build.rollupOptions.output.manualChunks to improve chunking
- Adjust chunk size warning limit via build.chunkSizeWarningLimit
3. Downgrade problematic dependencies:
- If you're using Tailwind CSS v4.0.10+, try downgrading to v4.0.9 as mentioned in the GitHub issue.
4. Use Docker deployment:
Consider using Docker for deployment as it gives you more control over the build environment. Nuxt Content provides Docker deployment documentation that might be helpful.
5. Increase memory allocation:
Some hosting providers allow you to increase the memory allocation for builds. Check if Vercel or Netlify offer this option for your plan.
6. Check for dependency conflicts:
Sometimes dependency conflicts can cause excessive memory usage. Try running
npm ls to check for duplicate or conflicting packages.
Remember that the .output directory is what should be deployed, not your entire project including node_modules. Make sure your deployment configuration is correctly set to use the built output.
If you continue to face issues, you might want to consider a hosting platform with higher resource limits or a more customizable deployment process.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@373447336678129665> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Hmm it's probably because I use html2canvas or napi-rs/canvas? Canvas is in my pnpm-lock file because it's a peerdependency though
Let me check the knowledge base for you again. One moment! :books:
----------------------
You might be onto something with the canvas libraries. Based on the knowledge sources, there are a few insights about canvas-related issues in Nuxt deployments:
Canvas Libraries and Deployment Issues
Canvas libraries like html2canvas or @napi-rs/canvas can indeed cause deployment issues, particularly with memory usage. These libraries often have native dependencies that need to be compiled for the target platform, which can increase build size and memory consumption during deployment.
From one of the Stack Overflow posts, there was a similar issue with chart.js (which also uses canvas):
"The easier route may be to export the canvas as datauri then use the buffer string as a src on a download button. This way you are just exporting the graph as a png or similar." Stack Overflow Question #78066892This suggests that canvas operations can be memory-intensive, especially during server-side rendering. Potential Solutions 1. Consider client-side only rendering for canvas components: Make sure your canvas components are only rendered on the client side using
<ClientOnly> wrapper or dynamic imports with ssr: false.
2. Optimize canvas operations:
If you're generating many canvas elements or doing complex operations, try to optimize or defer these operations.
3. Check Node.js version compatibility:
Make sure you're using a compatible Node.js version. As mentioned in one of the pull requests, Nuxt has specific Node.js version requirements (minimum 18.12.0) GitHub PR #30139.
4. Vercel-specific settings:
If you're using Vercel, you might need to adjust some settings as mentioned in the Nuxt Content Vercel deployment documentation:
- Ensure you're using Node.js 20.x or higher
- Use npx vercel deploy command or go through the Vercel dashboard Nuxt Content Vercel Deployment
5. Netlify-specific settings:
For Netlify, similar Node.js version requirements apply:
- Go to Site Configuration under Dependency management and change Node Version to 20.x or higher Nuxt Content Netlify Deployment
Canvas libraries can be particularly challenging in serverless environments due to their memory requirements. You might want to consider if you can move some of the canvas operations to be purely client-side or look into alternative approaches that are less memory-intensive.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@373447336678129665> Kapa.ai is still learning and improving, please let me know how I did by reacting below.