RafidMuhymin / astro-imagetools

Image Optimization tools for the Astro JS framework
astro-imagetools-docs.vercel.app
MIT License
407 stars 44 forks source link

bug: astro-imagetools crashing the serverless function with vercel adapter #170

Open floyare opened 1 year ago

floyare commented 1 year ago

I wanted to use astro-imagetools with output: "server" mode and vercel adapter to deploy it to vercel but whenever I'm entering the website the serverless function crashes with this specific error:

The problem does not appear in dev only in production deployed in vercel.

Unhandled Promise Rejection     
{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: ENOENT: no such file or directory, mkdir 
'undefined/'","reason":{"errorType":"Error","errorMessage":
"ENOENT: no such file or directory, mkdir 'undefined/'","code":"ENOENT","errno":-2,"syscall":"mkdir",
"path":"undefined/","stack":["Error: ENOENT: no such file or directory, mkdir 'undefined/'","    
at Object.mkdirSync (node:fs:1396:3)","
    at file:///var/task/vercel/path0/dist/chunks/pages/index.astro.1b654532.mjs:424:34"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: ENOENT: no such file or directory, mkdir 'undefined/'","
        at process.<anonymous> (file:///var/runtime/index.mjs:1186:17)","   
         at process.emit (node:events:525:35)","    at emit (node:internal/process/promises:149:20)","  
      at processPromiseRejections (node:internal/process/promises:283:27)","    
      at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Unknown application error occurred
Runtime.Unknown
//astro.config.mjs
import { defineConfig } from 'astro/config';
import { astroImageTools } from "astro-imagetools";

import vercel from "@astrojs/vercel/serverless";

// https://astro.build/config
export default defineConfig({
  integrations: [astroImageTools],
  output: "server",
  adapter: vercel()
});
{/* component */}
<Img src={`https://picsum.photos/1024/768/`} alt={"test"} width={300} height={300} placeholder="blurred" format="webp" loading="eager" />
jingxiangmo commented 1 year ago

I've also been struggling with this in the last hour, and I think it's Vercel's fault. I ended up not using astro-imagetools and moved my images into a /public folder in root and then used the img tag directly.

Something like:

import { Image } from 'astro:assets';
---
<img src={`/images/${proj.img_link}`} alt={proj.name}/>

There's a section on img and public/ in the Astro docs: https://docs.astro.build/en/guides/images/

It was pretty frustrating, hope this helps!