Error: EMFILE: too many open files

[lionelrudaz]

Moving from "phosphor-react" to "@phosphor-icons/react", I've got the following issues when deploying on Vercel in a Nextjs application:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js',
  page: '/guides'
}
RequestId: 2c953896-3cf8-4f3a-8bb0-86de2ca6662c Error: Runtime exited with error: exit status 1
Runtime.ExitError

I'm still using the /pages directory, haven't moved to /app yet in my codebase.

Tried to upgrade my Node server from v16 to v18, no luck.

SidebarSimple is not even used in my code.

Looks like it's bugging when I need to check the auth state with NextAuthjs. So perhaps there's a conflict with the signIn and signOut methodes from this other library, as I can see a lot of similar errors in my logs.

Let me know if I can bring more context.

[TobiasLueger]

@lionelrudaz How old is the project and what is the package json look like?☺️

What are you using in the pipe to build the project?

The emfile error sometimes come from a limit at the Node server. So that could be an problem.

[manskron]

Having the same problem.

Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js'
}
[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SignIn.es.js',
  page: '/1'
}
RequestId: f4203201-8c26-4fe8-8812-06219932ddcf Error: Runtime exited with error: exit status 1
Runtime.ExitError

[TobiasLueger]

@manskron, could you also give some more informations about your project pls.

How old is the project and what is the package json look like?☺️

What are you using in the pipe to build the project?

[manskron]

@TobiasLueger It's a Next.js v13.2.4 project running on Node v18.
Not entirely sure if this is what you mean, but we don't have a custom build pipe, it's taken care of by the Next.js compiler.

[manskron]

I am only getting this error when deploying on Vercel. Locally it seems to work just fine.

[wfl-junior]

I am having the same issue, I am trying to use the modularizeImports feature from next, but then I get the following error: Module not found: Can't resolve '@phosphor-icons/react/dist/icons/MagnifyingGlass', even though typescript says it exists.

Using the latest version: 2.0.6

[wfl-junior]

I managed to solve this problem using the modularizeImports feature from next like mentioned above, but the path for the icons is either incorrect in the package.json or for the types in TypeScript.

"exports": {
  ".": {
    "import": "./dist/index.es.js"
  },
  "./*": {
    "import": "./dist/icons/*.es.js"
  }
}

But it works with import Icon from "@phosphor-icons/react/Icon";

While TypeScript says the path should be import Icon from "@phosphor-icons/react/dist/icons/Icon";

Solution is to add the following property in your next config file:

modularizeImports: {
  "@phosphor-icons/react": {
    transform: "@phosphor-icons/react/{{member}}",
  },
},

And then you can use the imports normally and next will take care to modularize the imports for you.

[rektdeckard]

Hey gang. The paths for the icons were correct, but the typings did not account for the aliasing we do in the exports field in package.json. I have pushed a v2.0.8 build that

1. Fixes the typings for aliased exports, and
2. Includes a UMD build and a main field, so the lib should be comprehensible to CJS environments.

I recommend using the full /dist/icons/Foo paths all the same, if you plan on using modular imports.

I would love to hear if this fixes things for you.

[wfl-junior]

Hey gang. The paths for the icons were correct, but the typings did not account for the aliasing we do in the exports field in package.json. I have pushed a v2.0.8 build that

1. Fixes the typings for aliased exports, and
2. Includes a UMD build and a main field, so the lib should be comprehensible to CJS environments.

I recommend using the full /dist/icons/Foo paths all the same, if you plan on using modular imports.

I would love to hear if this fixes things for you.

Updated the lib version and my next config to:

modularizeImports: {
  "@phosphor-icons/react": {
    transform: "@phosphor-icons/react/dist/icons/{{member}}",
  },
},

And it does indeed work now with this path, thank you!

[lionelrudaz]

It's a Next.js v13.2.4 project running on Node v18.

Same here. I'm also deploying on Vercel.

Sorry for the delay in my answer.

@rektdeckard, does that mean we must have this configuration if we plan to use the library on a Nextjs project?

modularizeImports: {
  "@phosphor-icons/react": {
    transform: "@phosphor-icons/react/dist/icons/{{member}}",
  },
},

Please let us know if this is a temporary workaround or something that must be documented for new developers.

[rektdeckard]

@lionelrudaz I'm really not sure, I don't use Next and I'm honestly shocked at the hoops library maintainers are now needing to jump through to make basic functionality work in it. Every other build tooling supports tree-shaking of ESM modules out of the box, and can handle this in packages with 10 or 10,000 files. Why not in Next?

Could just be a Vercel thing too, IDK.

[lionelrudaz]

Got you, I agree this becomes a nightmare for you.

Should I open an issue at Vercel's end for that or do you plan to document the workaround? With the market shares of Vercel, this is perhaps a good thing to mention somewhere in your pages. I can help for that of course.

[rektdeckard]

@lionelrudaz you've tried the v2.0.8 without modularizeImports and still not working? If so, please do file a bug with Vercel. EMFILE error means they are paging in every JS module file referenced in /dist/index.es.js to memory at the same time, which means they either aren't tree-shaking modules, or they are doing it in a very inefficient manner. Yes, there are over 2500 files in this library, half of which are referenced in a single barrel file, but that should not be an exceptional case.

[bernardinorafael]

Just updating this Issue, I have this same error in a Next.js application, where I have version 2.0.5 of Phosphor and the error still persists, strangely, I have another application published in Vercel with the same version of the package and it does not show error.

[rektdeckard]

@bernardinorafael that's because this isn't an error originating in Phosphor, it's a Vercel CLI tool that is not designed to work with libraries with many small files.

Upgrade to 2.0.8 and try modularizing the imports.

[rektdeckard]

Possibly resolved by #56. Would anyone here care to test by upgrading to v2.0.10 and attempting to deploy to Vercel?

[lionelrudaz]

I've upgraded the library to 2.0.10, was using 2.0.9 before. I wonder if our friends at Vercel haven't changed something at their end, as I haven't added the modularizeImports workaround and I've been deploying with no issue for a while.

Anybody in the same situation?

[s0urfruit]

I've tried 2.0.9 & 2.0.10, both still result in the same error:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js',
  page: '/onboard'
}
RequestId: f43037d6-9a55-4320-ac4e-a0c042575b96 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Adding modularizeImports into my next.config.js hasn't worked either.

Should also note I am importing the icons as:
import * as Icons from "@phosphor-icons/react"

It does not work when importing each one individually either.

TL;DR — Vercel screwed something up?

[s0urfruit]

New error message on a different route (now errors at Sigma, not Sidebar)

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js',
  page: '/dashboard'
}
RequestId: 682253ba-77bf-4251-834d-ade211103887 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Current (temporary) solution: use the legacy package via npm i phosphor-react - works just fine. You just won't get some of the newer icons.

[dantevicenzo]

I'm having the same issue:

[Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/Sigma.es.js',
  page: '/'
}
RequestId: b2ef59e8-2c97-447d-937b-16b8ecd60b2f Error: Runtime exited with error: exit status 1
Runtime.ExitError

i had to switch from @phospor-icons/react to phosphor-react and now it's working fine.

[MelkorNemesis]

Loading the phosphor icons from react-icons/pi works ok too. Note that the components have different names though (e.g., Bold suffix).

[jasondainter]

Also having this issue on NextJs with Netlify.
Getting

Jul 11, 12:40:14 AM: 2533ac12 ERROR [Error: EMFILE: too many open files, open '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'] {Jul 11, 12:40:14 AM: 2533ac12 ERROR errno: -24,Jul 11, 12:40:14 AM: 2533ac12 ERROR code: 'EMFILE',Jul 11, 12:40:14 AM: 2533ac12 ERROR syscall: 'open',Jul 11, 12:40:14 AM: 2533ac12 ERROR path: '/var/task/node_modules/@phosphor-icons/react/dist/icons/SidebarSimple.es.js'Jul 11, 12:40:14 AM: 2533ac12 ERROR }

@dantevicenzo bit of a noob developer here but your solution looked promising, could you kindly explain the main differences of @phospor-icons/react vs phosphor-react?

I'm importing icons like this if its any help:

// Import phosphor icons import { PencilLine, Balloon, HandWaving, HandsClapping, TreePalm, HandsPraying, Heart, SmileyNervous, ThumbsUp, } from "@phosphor-icons/react";

Thanks ahead for any help.

[gabrielvrl]

Dit not work for me, can anyone help?

[rektdeckard]

It looks like Nextjs 13.5 added optimizations specifically for this problem (large component/icon libraries with many files). The modularizeImports object is should be replaced with optimizePackageImports: [...pkg names], and the bundler will automagically transform them into the respective submodule imports, in a more efficient way than before.

[xaphod]

Confirming @rektdeckard's find - we updated to NextJS 13.5.3 and the modularizeImports approach wasn't compiling, and we were getting the too many open files crash. The following in next.config.js fixed it:

    experimental: { 
      optimizePackageImports: ['@phosphor-icons/react']
    }

[Tamicktom]

It appears that in Nextjs version 13.5.5 this issue has been resolved without requiring any additional configuration.

[Kapaak]

I can confirm that this error is still present, if you try to import more icons at once.
("next": "^13.5.6", "@phosphor-icons/react": "^2.0.13")

The modularizeImports fix above is no longer working with the newest version, since the icons are now in different folders.
@phosphor-icons/react/dist/csr/{{member}}
and
@phosphor-icons/react/dist/ssr/{{member}}

So in order to make it work you need to change it to this:

 modularizeImports: {
    '@phosphor-icons/react': {
      transform: '@phosphor-icons/react/dist/ssr/{{member}}',
    },
  },

I was also using styled-components in my code and it was still throwing errors when I tried to style the icons (icon was undefined). So I also had to import the icon this way.

import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown';

But you would need to import all your icons this way, which is not rly fun. So its easier to use the experimental code and hope that it wont fail.

experimental: { 
      optimizePackageImports: ['@phosphor-icons/react']
    }

[conrad-vanl]

Getting this same error with a Vite + Remix app deployed to vercel. I've determined just importing a single icon causes the EMFILE errors in Vercel. I don't have access to "optimizePackageImports" since this is a remix+vite app.

I don't have too much helpful to add for others - importing the icons like import { CaretDown } from "@phosphor-icons/react/dist/csr/CaretDown" does resolve the issues. So for now we've migrated our codebase to direct imports like this.