react: Error: EMFILE: too many open files

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']
    }

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.

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.

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']
    }

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.

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.

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.