The size of the function content was too large. The limit for this Static Web App is 104857600 bytes

[marnocha]

I'm getting this error on GitHub actions when trying to deploy a simple nextjs application to Azure Static Web Apps:
---End of Oryx build logs---
Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 16
Finished building function app with Oryx
Zipping Api Artifacts
Done Zipping Api Artifacts
The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.

I followed this guide:
https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid

I've moved all devdependencies to the proper section in my package.json:
"dependencies": {
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1"
},
"devDependencies": {
"@types/node": "18.11.18",
"@types/react": "18.0.26",
"autoprefixer": "^10.4.13",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"postcss": "^8.4.21",
"sharp": "^0.31.3",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}

If I remove a couple images I can get it to build, but as the complexity of my app increases it hits the error. It works fine deploying to Vercel, but I would prefer to run it on Azure and use the supported hybrid (not just static site) features. Can you provide a solution or workaround to this issue that doesn't involve switching to static? Or fix this bug?

I know it isn't exactly related but I also am using the paid version of Azure static web apps so I can have larger projects, but that doesn't impact this bug as it seems the build process has a lower limit. Thank you!

[sachin-rathor]

Hi @marnocha,

Thanks for reaching out!

As a workaround you can try below steps:

1. To reduce the app size, see if removing the cache folder helps by changing the build script on package.json to something like "build": "next build && rm -rf ./.next/cache". More details: Max app size seems different than reported by Oryx #769 (comment)
2. For the 100MB limit, this is for NextJS Hybrid app, more details at https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs#unsupported-features-in-preview

We are working on improving the experience. We'll let know about the future updates.

Thanks!

[marnocha]

Thank you, the workaround works!

[infospry]

Hi,
Even adding build": "next build && rm -rf ./.next/cache". this line to package.json, still getting the same error
The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.
Please help me sort this issue as we are not able to deploy. Thanks

[infospry]

Hi @sulabh-msft @sachin-rathor please to fix this.

Even adding build": "next build && rm -rf ./.next/cache". this line to package.json, still getting the same error
The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.
Please help me sort this issue as we are not able to deploy. Thanks

[vivekjilla]

Hi @infospry Thanks for reaching out. Unfortunately, if the app is actually larger than 100MB due to dependent libraries in package.json, we don't have any workaround today other than figuring out the larger dependencies and remove them if possible.

But we're working in improving these limits and providing other options, but they're not available right now. Apologies for the inconvenience.

[infospry]

Hi @vivekjilla please check package.json where we are using only basic dependencies but still its not going through even the entire app is about 2-3 mb excluding cache
{
"name": "jobs-app-employer",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 3300",
"build": "next build && rm -rf ./.next/cache",
"start": "next start",
"lint": "next lint"
},

"dependencies": {
"@nextui-org/react": "^1.0.0-beta.11",
"formik": "^2.2.9",
"jsonwebtoken": "^8.5.1",
"next": "13.0.5",
"next-auth": "^4.17.0",
"react": "18.2.0",
"react-date-range": "^1.0.0-beta",
"react-dom": "18.2.0",
"react-hook-form": "^7.40.0",
"react-icons": "^4.6.0",
"react-toastify": "^9.1.1",
"react-top-loading-bar": "^2.3.1"
},
"devDependencies": {
"any-text": "^1.2.0",
"eslint": "8.28.0",
"eslint-config-next": "13.0.5"
}

[claustra01]

Hi, I solved same issue. Please try to change yml file in .github/workflows

Before:

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_BEACH_0A9C51000 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

After:

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_BEACH_0A9C51000 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          app_build_command: 'npm run build'
          api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
          ###### End of Repository/Build Configurations ######

[infospry]

hi @claustra01 thanks for the solution. It works perfectly now.

[IanIsFluent]

Hi, I solved same issue. Please try to change yml file in .github/workflows

Before:

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_BEACH_0A9C51000 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

After:

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_BEACH_0A9C51000 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          app_build_command: 'npm run build'
          api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
          ###### End of Repository/Build Configurations ######

Thanks for this! I can deploy now! BUT I can't take advantage of the build cache :(

I'm in Azure pipelines - I tried moving the cache folder to $(Pipeline.Workspace)/nextcache/ - but when I try to move it back I get mv: cannot stat '/home/vsts/work/1/nextcache/': No such file or directory 😢

[suriventures]

We have the same issue.

We are using Gitlab instead of Github, so we cannot use all of the guides for next.js and azure static web apps, since they are for Github.

Here is an example of the gitlab-ci.yml

image: node:14.16.0

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: "$CI_PROJECT_DIR"
  OUTPUT_PATH: "$CI_PROJECT_DIR/.next"

cache:
  paths:
    - node_modules/
    - .next/cache/

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."
  only:
    - main

This is our package.json

{
  "name": "xtrafit-spa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.2",
    "@next/font": "13.1.1",
    "@sentry/nextjs": "^7.37.0",
    "eslint": "8.30.0",
    "eslint-config-next": "13.1.1",
    "next": "13.1.1",
    "pino": "^8.10.0",
    "pino-logflare": "^0.3.12",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swr": "^2.0.3"
  }
}

Normally we use Vercel for Next.js, but now we have to use Azure since it is a requirement from the client. Does anyone know how to fix this?