The Serverless Function "index" is 50.75mb which exceeds the maximum size limit of 50mb

[TomBell95]

Hi,

In my Nuxt 2 application, I'm attempting to use serverless functions with Firebase, but I am encountering an issue with the size limit. After adding some Firebase calls to my /api/index.js file, I received the following error:

The Serverless Function "index" is 50.75mb which exceeds the maximum size limit of 50mb.

I've been troubleshooting for some time and have removed as many third-party packages as possible without success. The size reduction has only been minimal. After researching and applying the suggestion from this comment (using @nuxtjs/[email protected]), the size went down from 80mb to 50.75mb, but the problem still persists.

Does anyone have any advice on how to tackle this? It seems like a common issue, but I'm struggling to find a fix.

api/index.js

const express = require('express')
const cors = require('cors')
const app = express()
const { collection, getDocs } = require('firebase/firestore')
const { db } = require('../plugins/firebase')

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.get('/reviews', async (req, res) => {
  try {
    const reviewsSnapshot = await getDocs(collection(db, 'reviews'))
    const reviews = reviewsSnapshot.docs.map((doc) => doc.data())
    res.json(reviews)
  } catch (error) {
    console.error(error)
    res.status(500).json({ error: error.toString() })
  }
})

app.get('/galleries', async (req, res) => {
  try {
    const galleriesSnapshot = await getDocs(collection(db, 'galleries'))
    const galleries = galleriesSnapshot.docs.map((doc) => doc.data())
    res.json(galleries)
  } catch (error) {
    console.error(error)
    res.status(500).json({ error: error.toString() })
  }
})

app.get('/bookings', async (req, res) => {
  try {
    const bookingsSnapshot = await getDocs(collection(db, 'bookings'))
    const bookings = bookingsSnapshot.docs.map((doc) => doc.data())
    res.json(bookings)
  } catch (error) {
    console.error(error)
    res.status(500).json({ error: error.toString() })
  }
})

store/index.js

export const actions = {
 async nuxtServerInit({ dispatch }) {
    await dispatch('bookings/fetchBookings')
    await dispatch('reviews/fetchReviews')
    await dispatch('galleries/fetchGalleries')
  },
}

store/bookings.js

export const actions = {
  async fetchBookings({ commit }) {
    try {
      const response = await this.$axios.$get('api/bookings')
      commit('SET_BOOKINGS', response)
    } catch (error) {
      console.error(error)
    }
  },
}

vercel.json

{
  "version": 2,
  "routes": [
    {
      "src": "/api/index",
      "dest": "/api/index.js"
    }
  ],
  "builds": [
    {
      "src": "api/**/*.js",
      "use": "@vercel/node"
    },
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/[email protected]",
      "config": {
        "serverFiles": [
          "api/**"
        ]
      }
    }
  ]
}

package.json

"nuxt": "^2.15.8"
"@nuxtjs/vercel-builder": "^0.24.0"

[danielroe]

You might consider trying Nuxt Bridge which uses Nitro under the hood. (Nitro is able to produce much smaller builds.)

[TomBell95]

Thanks Daniel - will try that and confirm outcome