IS IT POSSIBLE TO DEPLOY A PNPM BASED NEXTJS APP TO THE WEB APP SERVICE?

Question

I've been trying to deploy my Next.js 15 app to Azure's Web App service for the past 2 days now but have been unsuccessful. I am using GitHub Actions to implement a CI/CD pipline. The deployment is successfull each time but the web app fails to start. I am using pnpm instead of npm to manage my packages and I think that might be the problem. Has anybody been able to successfully get this done?

My GitHub action workflow is as follows;

# 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 - bs42

on:
 push:
  branches:
   - main
 workflow_dispatch:

jobs:
 build:
  runs-on: ubuntu-latest
  permissions:
   contents: read #This is required for actions/checkout

  steps:
   - uses: actions/checkout@v4

   - name: Install pnpm
     uses: pnpm/action-setup@v4
     with:
      version: 10

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

   - name: Install dependencies
     run: pnpm install

   - name: Build Next.js app
     run: pnpm build

   - 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 }}
  permissions:
   id-token: write #This is required for requesting the JWT
   contents: read #This is required for actions/checkout

  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: Login to Azure
     uses: azure/login@v2
     with:
      client-id: <PLACEHOLDER>
      tenant-id: <PLACEHOLDER>
      subscription-id: <PLACEHOLDER>

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

Current errors I am receiving:

2025-04-19T15:33:08.518956513Z > bs42-v2@0.1.0 start

2025-04-19T15:33:08.518961333Z > next start

2025-04-19T15:33:08.518964064Z

2025-04-19T15:33:10.035158689Z node:internal/modules/cjs/loader:1228

2025-04-19T15:33:10.035192535Z throw err;

2025-04-19T15:33:10.035196469Z ^

2025-04-19T15:33:10.035199369Z

2025-04-19T15:33:10.035202098Z Error: Cannot find module '@swc/helpers/_/_interop_require_default'

2025-04-19T15:33:10.035204683Z Require stack:

2025-04-19T15:33:10.035207099Z - /home/site/wwwroot/node_modules/next/dist/shared/lib/constants.js

2025-04-19T15:33:10.035212519Z - /home/site/wwwroot/node_modules/next/dist/server/config.js

2025-04-19T15:33:10.035214930Z - /home/site/wwwroot/node_modules/next/dist/cli/next-test.js

2025-04-19T15:33:10.035217386Z - /home/site/wwwroot/node_modules/next/dist/bin/next

2025-04-19T15:33:10.035219725Z at Function.<anonymous> (node:internal/modules/cjs/loader:1225:15)

2025-04-19T15:33:10.035223019Z at /home/site/wwwroot/node_modules/next/dist/server/require-hook.js:55:36

2025-04-19T15:33:10.035225666Z at Function._load (node:internal/modules/cjs/loader:1055:27)

2025-04-19T15:33:10.035228052Z at TracingChannel.traceSync (node:diagnostics_channel:322:14)

2025-04-19T15:33:10.035230404Z at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)

2025-04-19T15:33:10.035232730Z at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)

2025-04-19T15:33:10.035235217Z at mod.require (/home/site/wwwroot/node_modules/next/dist/server/require-hook.js:65:28)

2025-04-19T15:33:10.035237631Z at require (node:internal/modules/helpers:136:16)

2025-04-19T15:33:10.035239933Z at Object.<anonymous> (/home/site/wwwroot/node_modules/next/dist/shared/lib/constants.js:279:34)

2025-04-19T15:33:10.035242446Z at Module._compile (node:internal/modules/cjs/loader:1554:14) {

2025-04-19T15:33:10.035244882Z code: 'MODULE_NOT_FOUND',

2025-04-19T15:33:10.035247195Z requireStack: [

2025-04-19T15:33:10.035249499Z '/home/site/wwwroot/node_modules/next/dist/shared/lib/constants.js',

2025-04-19T15:33:10.035251844Z '/home/site/wwwroot/node_modules/next/dist/server/config.js',

2025-04-19T15:33:10.035254153Z '/home/site/wwwroot/node_modules/next/dist/cli/next-test.js',

2025-04-19T15:33:10.035256482Z '/home/site/wwwroot/node_modules/next/dist/bin/next'

2025-04-19T15:33:10.035258806Z ]

2025-04-19T15:33:10.035261027Z }

Answer 1

Hello Admin ATT,

Thank you for posting your question in the Microsoft Q&A forum. 

The error (Cannot find module '@swc/helpers/_/_interop_require_default') indicates missing dependencies in your deployed artifact. This occurs because: 

• pnpm’s Strict Node Modules Structure: 
  • Unlike npm/yarn, pnpm uses a virtual store (node_modules/.pnpm), which isn’t fully preserved during ZIP extraction in Azure. 
• Incomplete Dependency Inclusion: 
  • Your zip command excludes hidden files (e.g., .pnpm), breaking SWC (Next.js’s compiler) dependencies. 

You may try Fix the Build & Deployment Workflow - Update your GitHub Actions YAML to: 

- name: Build Next.js app     

run: |       

pnpm install       

pnpm build       

# Include ALL files (including .pnpm)       

zip -r next.zip . -x '.git*'*   

 

Verify Azure Configuration 

• In Azure Portal → Web App → Configuration 
• Set WEBSITE_NODE_DEFAULT_VERSION to ~22. 
• Add PNPM_VERSION=10 in Application Settings. 

The above resolution addresses the core issue of incomplete dependency preservation during deployment, which stems from pnpm's unique package management approach. Unlike traditional npm installations that flatten dependencies into a single node_modules directory, pnpm utilizes a content-addressable storage system in .pnpm, significantly improving efficiency but requiring strict path integrity. The modified zip command's -r flag ensures all hidden files (including .pnpm) are included, maintaining the dependency tree structure Next.js requires for SWC compilation. 

If the above answer helped, please do not forget to "Accept Answer" as this may help other community members to refer the info if facing a similar issue. Your contribution to the Microsoft Q&A community is highly appreciated.