Node version error creating Azure Static Web Apps

[gabrielizalo]

Describe the bug

I used the Azure wizard to publish a Next JS App in GitHub to a new Static Web App. The Azure Wizard uses this yaml file: azure-static-web-apps-brave-mud-030f7e20f.yml

My problem: Appears this error in the Build and deploy job:

Summary:

[Build and Deploy Job](https://github.com/Axioma-X/RespuestasLaborales.DashBoard/actions/runs/3372604436/jobs/5596228247)
Node.js 12 actions are deprecated. For more information see: https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/. Please update the following actions to use Node.js 16: actions/checkout, actions/checkout

Also in the details appears this error:

error selenium-webdriver@4.5.0: The engine "node" is incompatible with this module. Expected version ">= 14.20.0". Got "14.19.1"

To Reproduce Just use the Portal Azure Wizard to publish a Next JS App.

• GitHub Actions or Azure Pipelines workflow YAML file:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

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_BRAVE_MUD_030F7E20F }}
          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" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_MUD_030F7E20F }}
          action: "close"

Expected behavior Build and deploy should work without errors.

Additional context How can I fix the yaml file? In the one I have, that Azure provided, I can't setup Node version.

[vivekjilla]

Hi @gabrielizalo Can you try specifying the node version in package.json under engines section and see if you can use node 16. For more details: https://edi.wang/post/2022/1/27/how-to-specify-nodejs-version-when-building-azure-static-web-app

Also just curious, as you're providing api_location and also output_location, are you using html export feature of NextJS? If so, please check if you need to add is_static_export: true in the config. More details at: https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs#static-html-export

[gabrielizalo]

@vivekjilla Thanks for the tip. You were right. I used: "node": "16.14.2" but now I'm getting this 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.

Also you asked me about providing api_location. Well. I'm new to Next JS. I just created an app that has the following:

• An API via NextJS APIs in src/pages/api that loads in my postman as ...my-server/api/
• Several JS pages load the data of those endpoints and show on the screen.

I don't use html export but yes the Next JS API pages to create my endpoints. For my web app I think it's not necessary the is_static_export: true. Should I delete the api_location: "/api" # Api source code path - optional line in my yaml?

Any ideas about the new error?

[gabrielizalo]

IN this document: Deploy hybrid Next.js websites on Azure Static Web Apps said that:

The maximum app size for the hybrid Next.js application is 100 MB. 

So I can't used Azure for my app. 😢

[vivekjilla]

Hey @gabrielizalo sorry for this inconvenience. Can you please checkout this discussion and see if the workaround mentioned here helps reduce your app size: https://github.com/Azure/static-web-apps/issues/769#issuecomment-1282035151

[gabrielizalo]

@vivekjilla Yes... I already tried it. But as I'm using MUI and other libs my project is very big. Like 200 MB. Hehehe