Issue with Version 2.0.18 causing Runtime Error on Vercel.com

[0OZ]

Description:

When deploying an application using Heroicons version 2.0.18 on Vercel, I am experiencing a runtime error that is not present when running the application locally or on another application within the same monorepo.

Error Details:

Here is the error I receive when deploying on Vercel:

- info Loaded env from /var/task/apps/tenders/.env
[Error: EMFILE: too many open files, open '/var/task/node_modules/@headlessui/react/dist/components/radio-group/radio-group.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@headlessui/react/dist/components/radio-group/radio-group.js',
  page: '/'
}
RequestId: 6c29a3c9-0bc3-496b-b942-06fc7826872d Error: Runtime exited with error: exit status 1
Runtime.ExitError


- info Loaded env from /var/task/apps/tenders/.env
[Error: EMFILE: too many open files, open '/var/task/node_modules/@headlessui/react/dist/components/menu/menu.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@headlessui/react/dist/components/menu/menu.js',
  page: '/'
}
RequestId: 278458b4-ffe7-4dbb-b294-b83ffbc1c770 Error: Runtime exited with error: exit status 1
Runtime.ExitError

---

package.json

path: /apps/tender/package.json

{
  "name": "@apps/tenders",
  "version": "1.0.0-next",
  "private": true,
  "main": "src/pages/index",
  "cacheDirectories": [
    ".next/cache"
  ],
  "scripts": {
    "dev": "NEXT_PUBLIC_API_URL=https://staging.api.auftrag-select.com next dev -p 3002",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint-fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
  },
  "dependencies": {
    "@as/apis": "workspace:*",
    "@as/shared": "workspace:*",
    "@charlietango/use-native-lazy-loading": "1.10.0",
    "@headlessui/react": "1.7.15",
    "@heroicons/react": "2.0.18",
    "@hookform/resolvers": "^3.1.1",
    "@monorepo/react-hooks": "workspace:*",
    "@monorepo/ui": "workspace:*",
    "@monorepo/utils": "workspace:*",
    "@react-hookz/web": "^23.1.0",
    "@tailwindcss/typography": "0.5.9",
    "@tanstack/react-query": "4.29.19",
    "@vercel/analytics": "1.0.1",
    "axios": "^1.4.0",
    "clsx": "1.2.1",
    "cookies-next": "2.1.2",
    "date-fns": "2.30.0",
    "firebase": "9.16.0",
    "firebase-admin": "11.9.0",
    "framer-motion": "^10.12.18",
    "geokit": "1.1.0",
    "google-map-react": "^2.2.1",
    "lodash": "4.17.21",
    "moment": "^2.29.4",
    "next": "^13.4.7",
    "next-firebase-auth": "^1.0.0-canary.22",
    "next-themes": "0.2.1",
    "nprogress": "0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-autocomplete": "2.7.3",
    "react-hook-form": "^7.45.1",
    "react-images-uploading": "^3.1.7",
    "react-intersection-observer": "9.5.2",
    "react-markdown": "8.0.7",
    "react-toastify": "^9.1.3",
    "remark-gfm": "3.0.1",
    "tailwind-scrollbar-hide": "^1.1.7",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@monorepo/eslint-config": "workspace:*",
    "@monorepo/tailwind-config": "workspace:*",
    "@types/google-map-react": "2.1.7",
    "@types/lodash": "4.14.195",
    "@types/node": "^20.3.3",
    "@types/nprogress": "0.2.0",
    "@types/react": "^18.2.14",
    "@types/yup": "^0.32.0",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.7",
    "sass": "^1.63.6",
    "typescript": "^5.1.6"
  }
}

Additional Information:

• No changes were made to the application code before encountering this issue.

If more information is required to understand and resolve this issue, kindly let me know.

Thank you.

[thecrypticace]

Hey! So looking at this — it doesn't look related to heroicons. You just happen to be hitting a limitation on Vercel on number of open files. My guess is it's because the build is being performed on Vercel and it has to go through a bunch of files to bundle them.

The repo doesn't happen to be public does it?

[0OZ]

Thank you for your response!

Unfortunately, the repository is not public, so I don't think I can grant you access. The fact that I used the latest version of Heroicons is not crucial at the moment; I simply found it intriguing for future development.

[vasanth-asokan]

I ran into the very same error today. It's not a build error, but a runtime error. There seem to be other reports like this on vercel community, but no definitive answer or root cause identified. I also don't have a public repo that I can share to illustrate the issue :(.

There seem to be similar errors reported in Vercel + Next.JS which seems to have introduced some sort of modularize imports feature to optimize imports: vercel/next.js#52646 though the files involved there are from headlessui.

Is there something about the way heroicons are bundled / imported that leads to this issue?

[vasanth-asokan]

Update: I removed a bunch of unused heroicon imports and the runtime error went away.

[vasanth-asokan]

Another way to workaround, instead of using named imports, start importing the icons directly. That is:

Instead of:
import { HeartIcon } from '@heroicons/react/24/outline';

do:

import HeartIcon from '@heroicons/react/24/outline/HeartIcon';