Getting ENOENT error on Vercel deployment

[midnightcodr]

Describe the bug

Hi, I followed the instruction at https://remix-image.mcfarl.in/docs/intro and created two files as exactly the same as the examples, app/routes/api/image.js and app/routes/img.tsx

//  app/routes/api/image.js

import type { LoaderFunction } from "@remix-run/server-runtime";
import { imageLoader, DiskCache } from "remix-image/server";

const config = {
  selfUrl: "http://localhost:3000",
  cache: new DiskCache(),
};

export const loader: LoaderFunction = ({ request }) => {
  return imageLoader(config, request);
};

// app/routes/img.tsx
import type { MetaFunction, LinksFunction } from "@remix-run/node";

export let meta: MetaFunction = () => {
  return {
    title: "About Remix"
  };
};
import {Image} from 'remix-image'

export default function Index() {
  return (
  <Image
  src="https://i.imgur.com/5cQnAQC.png"
  responsive={[
    {
      size: { width: 100, height: 100 },
      maxWidth: 500,
    },
    {
      size: { width: 600, height: 600 },
    },
  ]}
  dprVariants={[1, 3]}
/>
  );
}

Here's the package.json

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev"
  },
  "dependencies": {
    "@next-boost/hybrid-disk-cache": "^0.3.0",
    "@remix-run/node": "^1.7.2",
    "@remix-run/react": "^1.7.2",
    "@remix-run/vercel": "^1.7.2",
    "@vercel/node": "^2.4.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-image": "^1.3.3"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.7.2",
    "@remix-run/eslint-config": "^1.7.2",
    "@remix-run/serve": "^1.7.2",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "eslint": "^8.23.1",
    "typescript": "^4.7.4"
  },
  "engines": {
    "node": ">=14"
  }
}

So it's a very basic vanilla remix app. It runs fine locally, but when deployed to Vercel, I am getting the 500 error even on the landing page (https://test-remix-image2.vercel.app). The error log shows the following

[GET] /
08:47:04:53
RequestId: a36c849a-5f08-44ee-8f44-2ec78b5d35b1 Error: Runtime exited with error: exit status 1
Runtime.ExitError
2022-10-10T12:47:00.271Z    undefined   ERROR   Error: ENOENT: no such file or directory, mkdir 'tmp/img'
    at Object.mkdirSync (node:fs:1349:3)
    at Object.module.exports.makeDirSync (/var/task/node_modules/fs-extra/lib/mkdirs/make-dir.js:23:13)
    at new Cache (/var/task/node_modules/@next-boost/hybrid-disk-cache/dist/index.js:58:28)
    at new DiskCache (/var/task/node_modules/remix-image/build/server/index.js:1:170363)
    at Object.<anonymous> (/var/task/api/index.js:94:10)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:163:29) {
  errno: -2,
  syscall: 'mkdir',
  code: 'ENOENT',
  path: 'tmp/img'
}

Your Example Website or App

https://test-remix-image2.vercel.app

Steps to Reproduce the Bug or Issue

Open https://test-remix-image2.vercel.app and you'll see a 500 error page.

Expected behavior

I expect the home page and the image route (/img) to function properly.

Screenshots or Videos

No response

Platform

• Mac Monterey
• Tested with newest Safari & Firefox

Additional context

Free tier Vercel service

[justinmetros]

For Vercel, you will need to install @remix-run/vercel package to dependencies and also update your api/image route to point to a static Vercel url.

There is an example in the examples folder: https://github.com/Josh-McFarlin/remix-image/blob/master/examples/vercel/app/routes/api/image.ts

[midnightcodr]

Thanks. I updated to use the image.ts from vercel example and installed remix-image-sharp (I already had @remix-run/vercel installed when I reported the issue), problem Is now fixed.