NextJS Azure WebApp Deployment Error: cannot find module ../server/require-hook

Question

I'm having trouble deploying my nextjs application to my azure web app. The github-actions build and deployment complete successfully, however once deployed, I get an error in the url and this appears in the log stream. I don't understand what's causing it, as "npm start" builds and runs on my local machine with the same npm version. The application is in the "frontend" directory of my root file. Could that be an issue? Attached is the error and deployment files. Any help appreciated!

Build and Deployment Workflow:

name: Build and deploy Node.js app to Azure Web App - mm

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 --legacy-peer-deps
          npm run build --if-present
        working-directory: frontend

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

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        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@v3
        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@v2
        with:
          app-name: 'mm'
          slot-name: 'Production'
          package: frontend
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_******************************* }}

App Steam Error:

2024-01-26T14:19:35.427345342Z npm start
2024-01-26T14:19:43.527982622Z npm info using npm@9.6.4
2024-01-26T14:19:43.528330329Z npm info using node@v20.9.0
2024-01-26T14:19:43.728260894Z
2024-01-26T14:19:43.728298295Z > mm@0.1.0 start
2024-01-26T14:19:43.728303195Z > next start
2024-01-26T14:19:43.728306395Z
2024-01-26T14:19:44.180512023Z node:internal/modules/cjs/loader:1051
2024-01-26T14:19:44.180579624Z   throw err;
2024-01-26T14:19:44.180584624Z   ^
2024-01-26T14:19:44.180601425Z
2024-01-26T14:19:44.180751728Z Error: Cannot find module '../server/require-hook'
2024-01-26T14:19:44.180757428Z Require stack:
2024-01-26T14:19:44.180760528Z - /home/site/wwwroot/node_modules/.bin/next
2024-01-26T14:19:44.180763728Z     at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
2024-01-26T14:19:44.180766928Z     at Module._load (node:internal/modules/cjs/loader:901:27)
2024-01-26T14:19:44.180769928Z     at Module.require (node:internal/modules/cjs/loader:1115:19)
2024-01-26T14:19:44.180773028Z     at require (node:internal/modules/helpers:130:18)
2024-01-26T14:19:44.180776029Z     at Object.<anonymous> (/home/site/wwwroot/node_modules/.bin/next:6:1)
2024-01-26T14:19:44.180780029Z     at Module._compile (node:internal/modules/cjs/loader:1241:14)
2024-01-26T14:19:44.180783329Z     at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
2024-01-26T14:19:44.180786429Z     at Module.load (node:internal/modules/cjs/loader:1091:32)
2024-01-26T14:19:44.180789729Z     at Module._load (node:internal/modules/cjs/loader:938:12)
2024-01-26T14:19:44.180792729Z     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
2024-01-26T14:19:44.180796629Z   code: 'MODULE_NOT_FOUND',
2024-01-26T14:19:44.180800029Z   requireStack: [ '/home/site/wwwroot/node_modules/.bin/next' ]
2024-01-26T14:19:44.180803029Z }

Answer 1

This happens because zip release.zip ./* -r doesn't include hidden directories in the zip file, and we need .next to be included.

Quick Fix

Change ./* to .:

run: zip release.zip . -r

Better fix

Use a standalone deployment in next.config.js:

module.exports = {
  output: 'standalone',
}

Zip up the built standalone folder, instead of the entire source tree:

      - name: Zip artifact for deployment
        run: zip -r ../../release.zip .
        working-directory: ./.next/standalone

You can delete this Deploy step :

      - name: Unzip artifact for deployment
        run: unzip release.zip

And modify this one:

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'my-app'
          slot-name: 'production'
          package: release.zip

Set the app's environment variable WEBSITE_RUN_FROM_PACKAGE to 1.

Set the app's Startup Command to: pm2 start server.js --no-daemon

Answer 2

I don't know if this question is still open; I had the same problem and I solved doing this:

1. adding "startAzure": "./node_modules/next/dist/bin/next start" in package.json (as @Pravallika suggested); you have also to configure the startup command of the azure web app like "npm run startAzure"
2. adding this step to the pipeline (after the creation of the zip)

This because part of my problem was the fact that when the pipeline build the project and create the zip to be deployed it ignores the .next folder that is created with "npm run build" (probably because the name start with the dot). And without that folder the app do not start.

Answer 3

• Delete the node_modules folder and package-lock.json.
• Modify Scripts section in Package.json as below:

{
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "startAzure": "./node_modules/next/dist/bin/next start",
    "lint": "next lint"
  },

• If you are using pm2, change the startup script as below:

 module.exports = {
  apps: [
    {
      name: "app-name",
      script: "./node_modules/next/dist/bin/next",
      args: "start -p " + (process.env.PORT || 3000),
      watch: false,
      autorestart: true,
    },
  ],
};

• I have deployed a Nextjs application to Linux Azure App Service using GitHub actions.

name: Build and deploy Node.js app to Azure Web App - <appname>

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 release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        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@v3
        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@v2
        with:
          app-name: '<appname>'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_0A66FXXXXXXX6F0738 }}
          package: .

Portal:

References:

node.js - How do I get my Next.js app to start in an Azure App Service running ubuntu-latest?