Vercel/Next.js/React/Node 'too many open files' error

[leeuwd]

Prerequisites

• Version: [email protected], [email protected]
• Are you running from source/main: Next.js's Webpack
• Are you using a released build: Yes, https://github.com/lucide-icons/lucide/tree/v0.262.0
• Operating system: Node.js 18.x
• Bits:

Step to reproduce

Installed using yarn, following https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react.

Error happens when all icons are imported as React Component individually, and also when all icons are imported using Next.js dynamic import.

Actual behavior

Any message or error

Error message via Vercel logs:

[Error: EMFILE: too many open files, open '/var/task/node_modules/lucide-react/dist/esm/icons/share.mjs'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/lucide-react/dist/esm/icons/share.mjs'
}
[Error: EMFILE: too many open files, open '/var/task/node_modules/lucide-react/dist/esm/icons/share.mjs'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/node_modules/lucide-react/dist/esm/icons/share.mjs',
  page: '/robots.txt'
}
RequestId: ace94785-66ac-47ca-81d7-ff1ab00793bc Error: Runtime exited without providing a reason
Runtime.ExitError

Client side, nothing to go on:

Resources

Update; perhaps related?

• Error: EMFILE: too many open files vercel/next.js#52646

[ThimoDEV]

+1

[leeuwd]

Solved by adding the following to next.config.js:

// Modularize Lucide icon imports; otherwise, Vercel
// throws 'too many open files' error (https://github.com/lucide-icons/lucide/issues/1446)
// @see https://nextjs.org/docs/architecture/nextjs-compiler#using-named-imports
modularizeImports: {
  'lucide-react': {
    transform: 'lucide-react/{{member}}',
    skipDefaultConversion: true,
    preventFullImport: true,
  },
},

[Alex-ray]

Tried the next.config.js config to no avail.

I'm getting Module not found: Package path ./UserCircle is not exported from package /apps/web/node_modules/lucide-react (see exports field in /apps/web/node_modules/lucide-react/package.json) when trying to build.

"next": "13.4.10", "lucide-react": "^0.263.0"

[leeuwd]

My setup uses the Next.js dynamic import:

import dynamic from 'next/dynamic'
import { LucideProps } from 'lucide-react'
import dynamicIconImports from 'lucide-react/dynamicIconImports'
import { FunctionComponent } from 'react'

export interface Props extends LucideProps {
  name: keyof typeof dynamicIconImports
}

const SuperIcon: FunctionComponent<Props> = ({ name, ...props }) => {
  const LucideIcon = dynamic(
    dynamicIconImports[name],
    // Loader ensures classname (with Tailwind dimensions) are set and therefore reduce CLS
    { loading: () => <div className={props?.className} aria-hidden={true} /> },
  )

  return <LucideIcon aria-hidden={true} {...props} />
}

export default SuperIcon

[Alex-ray]

Ah that makes sense. @leeuwd a bit tangential but the problem with the dynamic imports is that they flash on load. How are you handling that?

[smolak]

Solved by adding the following to next.config.js:

// Modularize Lucide icon imports; otherwise, Vercel
// throws 'too many open files' error (https://github.com/lucide-icons/lucide/issues/1446)
// @see https://nextjs.org/docs/architecture/nextjs-compiler#using-named-imports
modularizeImports: {
  'lucide-react': {
    transform: 'lucide-react/{{member}}',
    skipDefaultConversion: true,
    preventFullImport: true,
  },
},

This is not working, checking locally, and getting:

Module not found: Package path ./Check is not exported from package /[path to project]/node_modules/lucide-react (see exports field in /[path to project]/node_modules/lucide-react/package.json)

I am on version 0.263.1

[josephkruse]

I'm also getting the same error as smolak above when I try the modularizeImports fix. Using the latest versions of next and lucide-react:

lucide-react: 0.263.1
next: 13.4.12

It's strange because it was working fine until yesterday.

[smolak]

I'm also getting the same error as smolak above when I try the modularizeImports fix. Using the latest versions of next and lucide-react:

lucide-react: 0.263.1 next: 13.4.12

It's strange because it was working fine until yesterday.

I checked with the 0.263.0 version, and it did not work. The problem is still there. Unless some older versions did work, but I haven't checked them out.

[ericfennis]

Related/duplicate issue see #1457.
See my comment in #1457 (possible todo with .mjs modules), for the time being try version: 0.261.0

[cstrnt]

I can confirm that 0.261.0 without ^ etc works fine with Next.js on Vercel

[smolak]

Hm.... interesting, let me check. I'll get back to you all once tested.

[smolak]

I can confirm that 0.261.0 without ^ etc works fine with Next.js on Vercel

What next.config.js confiugration are you using?
This one:

modularizeImports: {
  'lucide-react': {
    transform: 'lucide-react/{{member}}',
    skipDefaultConversion: true,
    preventFullImport: true,
  },
}

?

Asking as this is making the app fail locally:

Module not found: Can't resolve 'lucide-react/Check'
  1 | import { Check, ChevronRight, Circle } from "lucide-react";

[smolak]

It works on Vercel, v0.261.0, no configuration added. But, like I mentioned in one comment, that can be just me being below the limit and the problem still being there, as locally I still compile 1000+ more components when the app is run.

[cstrnt]

I can confirm that 0.261.0 without ^ etc works fine with Next.js on Vercel

What next.config.js confiugration are you using? This one:

modularizeImports: {
  'lucide-react': {
    transform: 'lucide-react/{{member}}',
    skipDefaultConversion: true,
    preventFullImport: true,
  },
}

?

Asking as this is making the app fail locally:

Module not found: Can't resolve 'lucide-react/Check'
  1 | import { Check, ChevronRight, Circle } from "lucide-react";

There is honestly no way that this option would ever work. The files are in some deeply nested folder which are not specified in the package.json from the lucide-react package

[Alex-ray]

Confirmed downgrading to 0.261.0 fixed the issues for me as well.

[smolak]

Good news. NextJS PR just got merged to canary.

[smolak]

But there are some problems - could you guys cooperate to get this fixed on both sides? :) Would be cool.

[ericfennis]

Just deployed a nextjs project successfully on Vercel with version [email protected].
@leeuwd Can you check if this version solves your issue?