Recently, one of our projects started to use the new fluid calculation function of vercel, but in some ISR pages, the following problem occurs, and we are still vercel pro members, we really don’t understand why this bug occurs, and hope that the official assistance in troubleshooting!
⨯ [Error: EMFILE: too many open files, open '/var/task/node_modules/@tanstack/react-query/build/modern/useIsFetching.js'] {
errno: -24,
code: 'EMFILE',
syscall: 'open', path: ''
path: '/var/task/node_modules/@tanstack/react-query/build/modern/useIsFetching.js'
}
I hope the official can assist us to troubleshoot, thanks!
Below is a sample code example:
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import PaymentsLayout from '@/components/layout/payments'
import PaymentLink from '@/components/dapp/pay/link'
import { bigintFactory } from '@/lib/db/prisma/utils'
import prisma from '@/lib/db/prisma'
import { useUserData } from '@/lib/hooks'
export async function getStaticPaths() {
return {
paths: [],
fallback: 'blocking',
}
}
export async function getStaticProps(context) {
const { id } = context.params
try {
let data = await prisma.payee.findUnique({
where: { id },
})
if (!data) {
return { notFound: true }
}
data = bigintFactory(data)
return {
props: { data },
revalidate: 10,
}
} catch (error) {
console.error('Error fetching payment link:', error)
return {
notFound: true,
// props: { error: 'Failed to load payment link ˙◠˙' },
}
}
}
export default function PayLinkFormId({ data, error }) {
const router = useRouter()
const user = useUserData()
if (user?.id && data?.uuid && user?.id !== data?.uuid) {
router.replace('/pay')
return null
}
return (
<PaymentsLayout navTitle="Update Payment Link">
<PaymentLink data={data} customClass="pt-8" />
</PaymentsLayout>
)
}
The error you’re seeing, EMFILE: too many open files, is likely due to a difference in the available File Descriptors between our Serverless Functions infrastructure (which has a limit of 1024) and your development operating system if yourServerless Functions are bundled together. This bundling could lead to unnecessary imports being included for your root page, potentially contributing to the issue.
To address this, we recommend setting custom values for your page to have it bundled separately. You can refer to the following documentation for guidance on configuring your functions: Advanced Configuration for Bundling Vercel Functions.
Another effective solution is to implement Next.js’s optimizePackageImports feature, which intelligently imports only the specific modules you need rather than entire packages:
One more question, I see you guys have started default optimization for most of the packages, optimizePackageImports doesn’t seem to have any new packages I want to add, and also the functions configuration in the vercel.json, I see that the example is to do memory optimization for some pages api routes, and now I’m some pages, like pages/ scan/[id].tsx How to configure such pages? Thanks!
You’re right that Next.js already optimizes many popular packages by default . The default list includes packages like lucide-react, date-fns, @mui/material, react-icons/*, and many others. If the packages you’re using are already in the default list, you don’t need to add them manually.
Functions Configuration in vercel.json
For configuring memory settings for a specific page like pages/scan/[id].tsx in your vercel.json file, you would use the following pattern:
This configuration allocates 1GB of memory to your scan/[id] page. You can adjust the memory value based on your needs (the value is in MB).
For dynamic routes like yours with the [id] parameter, the configuration applies to all instances of that route pattern. You can also use more general patterns to apply settings to multiple routes: