How to resolve the error: 'There appears to be trouble with your network connection. Retrying...' during Azure App Service deployment?

Question

I am deploying a Next.js App Router hybrid web app to a Basic tier App Service via VS Code. I have also tried direct deployment using Azure Repos, but every time I encounter the error: 'There appears to be trouble with your network connection. Retrying...'

Here is my package.json:

{
  "name": "anvogue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@azure/storage-blob": "^12.25.0",
    "@cashfreepayments/cashfree-js": "^1.0.5",
    "@phosphor-icons/react": "^2.0.14",
    "axios": "^1.7.2",
    "cordova-plugin-cashfree-pg": "^1.0.6",
    "date-fns": "^4.1.0",
    "formik": "^2.4.6",
    "framer-motion": "^10.17.4",
    "lottie-react": "^2.4.0",
    "next": "14.0.3",
    "next-cookie": "^2.8.0",
    "nprogress": "^0.2.0",
    "rc-slider": "^10.5.0",
    "react": "^18",
    "react-dom": "^18",
    "react-fast-marquee": "^1.6.2",
    "react-icons": "^5.3.0",
    "react-loading": "^2.0.3",
    "react-paginate": "^8.2.0",
    "react-slick": "^0.29.0",
    "react-slider": "^2.0.6",
    "react-toastify": "^10.0.5",
    "sass": "^1.69.5",
    "sharp": "^0.33.5",
    "slick-carousel": "^1.8.1",
    "swiper": "^11.0.4",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-slick": "^0.23.12",
    "@types/react-slider": "^1.3.6",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "react-image-zoom": "^1.3.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output:"standalone",
  images: {
    remotePatterns: [
      {
        hostname: "shineonpreprod.blob.core.windows.net",
      },
      {
        hostname: "plus.unsplash.com",
      },
      {
        hostname: "scontent.cdninstagram.com",
      },
    ],
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  env: {
    ImageUrl: "https://shineonpreprod.blob.core.windows.net",
  },
};

module.exports = nextConfig;

Here are the output logs from my deployment:

Please help me resolve this issue.

Answer 1

@sachapara pratik Thanks for asking question! If I am understanding right you are facing below error-

There appears to be trouble with your network connection. Retrying…error An unexpected error occurred: 'https://registry.yarnpkg.com/<package name>.tgz: ESOCKETTIMEDOUT'.

The reason is if using Yarn install, there are some libraries that can take more time and can timeout after the default value= 60000

Actions-

Detect which library is timing out

• Increase yarn timeout
• Redeploy
• Build node_modules not using Oryx (last option)

Reference- https://azureossd.github.io/2023/02/09/troubleshooting-nodejs-deployments-on-appservice-linux/