Cannot find module '../server/require-hook' Nextjs Azure Web App deployment via GitHub actions

Question

Trying to deploy this barebones Nextjs app into an Azure Web App (from GitHub Actions) I get the following exception at runtime:

Error: Cannot find module '../server/require-hook'
  Ok
2024-07-13T05:21:05.27594
Require stack:
  Ok
2024-07-13T05:21:05.2759785
- /home/site/wwwroot/node_modules/.bin/next
  Ok
2024-07-13T05:21:05.2759846
    at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
  Ok
2024-07-13T05:21:05.275989
    at Module._load (node:internal/modules/cjs/loader:986:27)
  Ok
2024-07-13T05:21:05.2759931
    at Module.require (node:internal/modules/cjs/loader:1233:19)
  Ok
2024-07-13T05:21:05.2759972
    at Module.patchedRequire (/agents/nodejs/node_modules/diagnostic-channel/dist/src/patchRequire.js:16:46)
  Ok
2024-07-13T05:21:05.2760016
    at Hook._require.Module.require (/agents/nodejs/node_modules/require-in-the-middle/index.js:167:34)
  Ok
2024-07-13T05:21:05.276006
    at require (node:internal/modules/helpers:179:18)
  Ok
2024-07-13T05:21:05.27601
    at Object.<anonymous> (/home/site/wwwroot/node_modules/.bin/next:6:1)
  Ok
2024-07-13T05:21:05.2760147
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
  Ok
2024-07-13T05:21:05.2760187
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
  Ok
2024-07-13T05:21:05.2760226
    at Module.load (node:internal/modules/cjs/loader:1208:32) {
  Ok
2024-07-13T05:21:05.2760349
  code: 'MODULE_NOT_FOUND',
  Ok
2024-07-13T05:21:05.2760387
  requireStack: [ '/home/site/wwwroot/node_modules/.bin/next' ]
  Ok
2024-07-13T05:21:05.2760428
}

The deployment works if done via VSCode with the Azure Extensions but I need it to be automated via GitHub Actions.

The deployment file is the default one Azure provides when setting up the continuous integration. Any ideas how to fix it?

My yml in case you don't want to open the link:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - nextjs-az-template

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip
      
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'nextjs-az-template'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_FB5C5356BD1A48A79DF07D1243712E42 }}

Answer 1

I tried your code and deployed to the Azure App service through GitHub and it successful.

Thank you @Azure OSS Developer Support, for Clearly explanation.

code: 'MODULE_NOT_FOUND'

• The above error mainly occurs with Zip deploy scenarios, to avoid the error add the start script to the package.json.

"start": "node_modules/next/dist/bin/next start",

package.json:

{
  "name": "nextjs-az-webapp-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "node_modules/next/dist/bin/next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.5"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5"
  }
}

• .next directory contains the build output of Next.js project, including compiled JavaScript, CSS, and other static assets required for application to run in Production.
• .next is not included to Zip folder, So I included by using below lines.

 - name: Zip artifact for deployment
     run: zip next.zip ./* .next -qr

.github/workflows:

name: Build and deploy Node.js app to Azure Web App - kanextjsapp1
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: Zip artifact for deployment
        run: zip next.zip ./* .next -qr
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: next.zip
  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app
      - name: Unzip artifact for deployment
        run: unzip next.zip
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'kanextjsapp1'
          slot-name: 'Production'
          package: next.zip
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_<AzureKey> }}

It is Successful deployed through GitHub as shown below.

Azure App Service Output: