NextJs: The Serverless Function exceeds the maximum size limit of 50mb

Question

I'm new working with NextJs and when trying to deploy my project to Vercel I'm getting the following error:

Error! The Serverless Function "api/auth" is 50.55mb which exceeds the maximum size limit of 50mb.

I have spent a lot of my time trying to find a proper answer but I didn't find any. Here is the code of the api request I'm making:

const { auth: adminAuth } = require("firebase/admin");

export default async function auth(req, res) {
  const tokenId = req.query.token;
  return new Promise((resolve) => {
    adminAuth
      .verifyIdToken(tokenId)
      .then((user) => {
        res.json(user);
        resolve();
      })
      .catch(() => {
        res.status(302).send("Invalid authentication");
        resolve();
      });
  });
}

I'll be really grateful if anybody can help me, thanks y'all!

Answer 1

I've been dealing with the same issue. It appears that when bundling the serverless function vercel is pulling in ALL assets within your project. So 50.55MB is likely the size of your current entire build. I'm researching how to only include certain files within the vercel.json but have so far not figured exactly how to do that. For now you could probably just remove a few files from your public assets to get under the limit.

Answer 2

This is likely caused by firebase/admin including everything in the firebase package, not just the "admin" parts.

You can verify this by creating a file with only the import and running @vercel/nft to trace the files.

npm init -y
npm add firebase
echo "const { auth: adminAuth } = require('firebase/admin')" > index.js
npm i -g @vercel/nft
nft print index.js

The entire firebase package is quite large, so its best to follow the recommendation from the firebase team and use the firebase-admin package inside Serverless Functions.

This SDK (firebase) is intended for end-user client access from environments such as the Web, mobile Web (e.g. React Native, Ionic), Node.js desktop (e.g. Electron), or IoT devices running Node.js. If you are instead interested in using a Node.js SDK which grants you admin access from a privileged environment (like a server), you should use the Firebase Admin Node.js SDK (firebase-admin).

source: firebase NPM

Answer 3

Next.js 12.3 includes the dependencies you specified in package.json as well as their dependencies in the build thus potentially increasing the build size until the current maximum of 50MB is reached.

In my case it was the pdfjs-dist package that had canvas as a dependency. It is enough to list pdfjs-dist as a dependency in package.json to make Vercel builds fails. It does not even matter if you actually import any file from the packages.

Error: The Serverless Function "api/***" is 64.75mb which exceeds the maximum size limit of 50mb.

Finding the culprit

The Vercel build logs should list the packages included in the build along with their size. In our case:

All dependencies                                        208.68 MB         57.14 MB
Serverless Function's page: api/***
Large Dependencies                              Uncompressed size  Compressed size
node_modules/canvas/build                               164.01 MB         42.82 MB
node_modules/sharp/vendor                                16.13 MB          6.76 MB
...

Excluding packages from a build

The canvas dependency was not required in our case. To exclude a package from the bundle and thus reduce the size for the serverless functions:

• With Next.js 13.3 the experimental.outputFileTracingExcludes key in your next.config.js should allow excluding a package

const nextConfig = {
  experimental: {
    outputFileTracingRoot: path.join(__dirname, '../../'),
    outputFileTracingExcludes: {
      '*': [
        'node_modules/canvas',
      ],
    },
  },
}

• Since I was using Next.js 12.3 and Yarn I ended up replacing the dependency with a stub by using the following in package.json:

  "resolutions": {
    "canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
  }

Similar workarounds should exist for NPM.

Answer 4

add this to your next.config

 experimental: {
    outputFileTracingIgnores: ["**canvas**"],
  },

Answer 5

For anyone getting this error I found that it was caused by nextjs including swc and esbuild dependencies in my serverless functions when it didn't need to. The fix was to add this to my next.config.js

 experimental: {
    outputFileTracingExcludes: {
      '*': [
        'node_modules/@swc/core-linux-x64-gnu',
        'node_modules/@swc/core-linux-x64-musl',
        'node_modules/@esbuild/linux-x64',
      ],
    },
  },

Answer 6

In my case it was the canvas dependency of pdfjs-dist and adding an override to my package.json (pnpm) solved the issue.

"pnpm": {
  "overrides": {
    "canvas": "../_EXCLUDED_"
  }
},

Answer 7

You could add .vercelignore file to avoid this

Ref: https://vercel.com/guides/prevent-uploading-sourcepaths-with-vercelignore

# Ignore everything (folders and files) on root only
/*
!api
!vercel.json
!*.html
!*.css