Most basic configuration exceeds Vercel limits

[selfagency]

I have a tiny application comprised of a grand total of three pages with an API call and a smidgen of business logic and when I push to Vercel it says it's too big to run.

Error: The Serverless Function "index" is 66.68mb which exceeds the maximum size limit of 50mb. Learn more: https://vercel.com/docs/v2/platform/limits#serverless-function-size`

[danielroe]

@selfagency Perhaps you could share some code? Happy to look at if so. My largest production app using this builder is about 20 Mb.

[selfagency]

https://gitlab.com/rushkoff/rushkoff-nuxt/

[danielroe]

@selfagency Hm, that is odd. I do note that you have quite a few files depended upon by your nuxt.config (nice and clean file structure, by the bye!), and you'll need to specify these using the serverFiles config key. That may make a difference.

[danielroe]

@selfagency I believe sentry may well be the culprit. Let me know if removing it makes a difference for you.

[miteyema]

@selfagency @danielroe I had a similar problem. You have to move some dependencies to
devDependencies in your package.json. You don't need to put everything in
dependencies, because that is what makes your single serverless function to blow up. I see you have things like node-sass and sass-loader. They all can me moved to devDependencies. I did the same and everything still works fine.

[MarvinMiles]

Yep. You can even put nuxt itself to devDependencies and it shall work with this builder.

[azpery]

1. In package.json : Move all dependencies in devDependencies
2. Delete package-lock.json
3. Run npm i to regenerate a new package-lock.json

Works using yarn too.

source : https://dev.to/patzick/why-dependencies-matter-deploy-your-nuxt-ssr-universal-app-to-vercel-now-4ndp

[DidoMarchet]

Hi guys!
I reopen this thread because following the instructions above Vercel return me this error:

This is my package.json:

{
  "name": "app",
  "version": "1.0.0",
  "description": "Nuxt app starter kit",
  "private": true,
  "author": "Davide Marchet",
  "license": "MIT",
  "scripts": {
    "vercel-build": "npm run install:all && nuxt build",
    "dev": "nuxt",
    "build": "nuxt build",
    "analyze": "nuxt build --analyze",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint --fix \"**/**/*.{vue,scss,css}\" --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "install:library": "cd ../library/ && npm i",
    "install:app": "npm i",
    "install:all": "npm run install:library && npm run install:app",
    "test": "jest"
  },
  "devDependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "core-js": "^3.20.2",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "esm": "^3.2.25",
    "express": "^4.17.2",
    "fabric": "^4.6.0",
    "gsap": "^3.9.1",
    "library": "file:../library",
    "modern-css-reset": "^1.4.0",
    "nuxt": "^2.15.8",
    "nuxt-i18n": "^6.27.2",
    "nuxt-vuex-localstorage": "^1.3.0",
    "qs": "^6.10.3",
    "scss-react": "^1.0.2",
    "scss-slamp": "^1.3.3",
    "three": "^0.136.0",
    "@babel/eslint-parser": "^7.16.5",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/style-resources": "^1.2.0",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.4.6",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.4.7",
    "node-sass": "^7.0.1",
    "nodemon": "^2.0.15",
    "prettier": "^2.5.1",
    "sass": "^1.47.0",
    "sass-loader": "^10.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-scss": "^3.19.0",
    "vue-jest": "^3.0.7"
  }
}

and this my vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "app/nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["package.json", "library/node_modules/**", "static/**", "configuration/**", "server-middleware/**", "translation/**", ".nuxt/dist/sitemap-routes.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/sw.js",
      "continue": true,
      "headers": {
        "Cache-Control": "public, max-age=0, must-revalidate",
        "Service-Worker-Allowed": "/"
      }
    },
    {
      "src": "/.nuxt/.+",
      "headers": {
        "Cache-Control": "max-age=31557600"
      }
    },
    {
      "src": "^/(.*)",
      "dest": "/"
    }
  ]
}

I cannot figure out how to solve this problem.
Any advice are precious!

Thanks in advance and kind regards,

Davide

Hi guys! I reopen this thread because following the instructions above Vercel return me this error:

This is my package.json:

{
  "name": "app",
  "version": "1.0.0",
  "description": "Nuxt app starter kit",
  "private": true,
  "author": "Davide Marchet",
  "license": "MIT",
  "scripts": {
    "vercel-build": "npm run install:all && nuxt build",
    "dev": "nuxt",
    "build": "nuxt build",
    "analyze": "nuxt build --analyze",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint --fix \"**/**/*.{vue,scss,css}\" --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "install:library": "cd ../library/ && npm i",
    "install:app": "npm i",
    "install:all": "npm run install:library && npm run install:app",
    "test": "jest"
  },
  "devDependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "core-js": "^3.20.2",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "esm": "^3.2.25",
    "express": "^4.17.2",
    "fabric": "^4.6.0",
    "gsap": "^3.9.1",
    "library": "file:../library",
    "modern-css-reset": "^1.4.0",
    "nuxt": "^2.15.8",
    "nuxt-i18n": "^6.27.2",
    "nuxt-vuex-localstorage": "^1.3.0",
    "qs": "^6.10.3",
    "scss-react": "^1.0.2",
    "scss-slamp": "^1.3.3",
    "three": "^0.136.0",
    "@babel/eslint-parser": "^7.16.5",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/style-resources": "^1.2.0",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.4.6",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.4.7",
    "node-sass": "^7.0.1",
    "nodemon": "^2.0.15",
    "prettier": "^2.5.1",
    "sass": "^1.47.0",
    "sass-loader": "^10.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-scss": "^3.19.0",
    "vue-jest": "^3.0.7"
  }
}

and this my vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "app/nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["package.json", "library/node_modules/**", "static/**", "configuration/**", "server-middleware/**", "translation/**", ".nuxt/dist/sitemap-routes.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/sw.js",
      "continue": true,
      "headers": {
        "Cache-Control": "public, max-age=0, must-revalidate",
        "Service-Worker-Allowed": "/"
      }
    },
    {
      "src": "/.nuxt/.+",
      "headers": {
        "Cache-Control": "max-age=31557600"
      }
    },
    {
      "src": "^/(.*)",
      "dest": "/"
    }
  ]
}

I cannot figure out how to solve this problem. Any advice are precious!

Thanks in advance and kind regards,

Davide

Same issue.

[azpery]

Did you look into "Functions" tab in your deployment to watch server side errors ?

[DidoMarchet]

Hi,
moving all dependencies in devDependencies didn't work for me.
Then I debugged and I saw that moving threejs and fabric as devDependencies let Vercel works as aspected.

I also remove huge assets from static directory.

If could be useful this is my new package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "Nuxt app starter kit",
  "private": true,
  "author": "Davide Marchet",
  "license": "MIT",
  "scripts": {
    "vercel-build": "npm run install:all && nuxt build",
    "netlify-build": "npm run install:all && nuxt generate",
    "dev": "nuxt",
    "build": "nuxt build",
    "analyze": "nuxt build --analyze",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint --fix \"**/**/*.{vue,scss,css}\" --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "install:library": "cd ../library/ && npm i",
    "install:app": "npm i",
    "install:all": "npm run install:library && npm run install:app",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "core-js": "^3.20.2",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "gsap": "^3.9.1",
    "library": "file:../library",
    "modern-css-reset": "^1.4.0",
    "nuxt": "^2.15.8",
    "nuxt-i18n": "^6.27.2",
    "nuxt-vuex-localstorage": "^1.3.0",
    "qs": "^6.10.3",
    "scss-react": "^1.0.2",
    "scss-slamp": "^1.3.3"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.5",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/style-resources": "^1.2.0",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.4.6",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.4.7",
    "node-sass": "^7.0.1",
    "nodemon": "^2.0.15",
    "prettier": "^2.5.1",
    "sass": "^1.47.0",
    "sass-loader": "^10.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-scss": "^3.19.0",
    "three": "^0.136.0",
    "vue-jest": "^3.0.7",
    "webpack": "^4.46.0"
  }
}

I hope Vercel/Nuxt team sooner or later will fix all this runtime issues :)
Have a nice day and kind regards,
Davide

@azpery This is the log,

2022-02-22T09:12:41.653Z undefined ERROR Uncaught Exception {"errorType":"Error","errorMessage":"Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:\n Error: Cannot find module 'esm'\nRequire stack:\n- /var/task/vercel__launcher.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","stack":["Error: Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:"," Error: Cannot find module 'esm'","Require stack:","- /var/task/vercel__launcher.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at Object.<anonymous> (/var/task/vercel__launcher.js:23:13)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Module.require (internal/modules/cjs/loader.js:974:19)"," at require (internal/modules/cjs/helpers.js:93:18)"," at _tryRequireFile (/var/runtime/UserFunction.js:63:32)"," at _tryRequire (/var/runtime/UserFunction.js:151:20)"," at _loadUserApp (/var/runtime/UserFunction.js:197:12)"]} 2022-02-22T09:12:41.653Z undefined ERROR Uncaught Exception {"errorType":"Error","errorMessage":"Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:\n Error: Cannot find module 'esm'\nRequire stack:\n- /var/task/vercel__launcher.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","stack":["Error: Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:"," Error: Cannot find module 'esm'","Require stack:","- /var/task/vercel__launcher.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at Object.<anonymous> (/var/task/vercel__launcher.js:23:13)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Module.require (internal/modules/cjs/loader.js:974:19)"," at require (internal/modules/cjs/helpers.js:93:18)"," at _tryRequireFile (/var/runtime/UserFunction.js:63:32)"," at _tryRequire (/var/runtime/UserFunction.js:151:20)"," at _loadUserApp (/var/runtime/UserFunction.js:197:12)"]}

package.json

{
  "name": "website",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "build:analyze": "nuxt build --analyze",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest",
    "build:static": "nuxt build && nuxt generate"
  },
  "dependencies": {
    "@fortawesome/fontawesome-pro": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/pro-duotone-svg-icons": "^5.15.4",
    "@fortawesome/pro-light-svg-icons": "^5.15.4",
    "@sentry/tracing": "^6.13.3",
    "axios": "^0.22.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.15.1",
    "dayjs": "^1.10.7",
    "nuxt": "^2.15.7",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/sentry": "^5.1.4",
    "@nuxtjs/vercel-builder": "^0.22.1",
    "sass": "1.32.13",
    "sass-loader": "^10.1.1"
  }
}

Moved @nuxt/content, @nuxtjs/fontawesome, @nuxtjs/sentry to devDependencies.