Rafcin commented 2 years ago

Before opening, please confirm:

[X] I have checked to see if my question is addressed in the FAQ.
[X] I have searched for duplicate or closed issues.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

arn:aws:amplify:us-west-2:707129987630:apps/d30o3wao502f5x

Region

us-west-2

Amplify Console feature

Build settings, Monorepo

Describe the bug

Quick and simple. I rewrote my app to stop using NX and just work with Yarn workspaces. After a few days it's finally deploying and it looks good. The issue revolves around the services that are deployed after build. When I deploy the app, the only services that are spun up are SSR Lambda@Edge, CloudFront Domain and S3 Bucket.

It looks like ISR and Image optimization are both not created during deployment. When I check the lambda logs the only issue I get is

{
    "errorType": "Error",
    "errorMessage": "Cannot find module '../../webpack-runtime.js'\nRequire stack:\n- /var/task/pages/restaurant/[id].js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/restaurant/[id].js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module '../../webpack-runtime.js'",
        "Require stack:",
        "- /var/task/pages/restaurant/[id].js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:667:27)",
        "    at Module.require (internal/modules/cjs/loader.js:887:19)",
        "    at require (internal/modules/cjs/helpers.js:74:18)",
        "    at /var/task/pages/restaurant/[id].js:1577:27",
        "    at Object.<anonymous> (/var/task/pages/restaurant/[id].js:1583:3)",
        "    at Module._compile (internal/modules/cjs/loader.js:999:30)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)",
        "    at Module.load (internal/modules/cjs/loader.js:863:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:708:14)"
    ]
}

It's weird this now only appears on a single page that uses getSSRprops and takes a query param. Otherwise the site works (minus the images).

I read this could be a Next 12 issue, however, I solved the 503 error by removing the transpile modules plugin and I originally the day Next12 came out successfully deployed a Next 12 app with Webpack 5.

Expected behavior

The expected services that should be deployed are SSR Lambda@Edge, CloudFront Domain, S3 Bucket, API Lambda@Edge, Image optimization, ISR Lambda and ISR SQS Queue.

Reproduction steps

PKG JSON

{
  "name": "fox-app",
  "version": "0.0.2",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "amplify-build": "yarn share:static:hardlink && cross-env AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE=true next build",
    "vercel-build": "yarn share:static:hardlink && cross-env NEXTJS_BUILD_TARGET=serverless next build",
    "clean": "rimraf --no-glob ./.next ./out ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
    "start": "next start",
    "?share:static:symlink": "echo 'Use this command to link assets, locales... from shared static folder'",
    "share:static:symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
    "?share:static:hardlink": "echo 'Use this command to link assets, locales... from shared static folder'",
    "share:static:hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
    "bundle:analyze": "cross-env ANALYZE=true yarn build",
    "bundle:check-size": "size-limit",
    "test": "run-s 'test:*'",
    "test:unit": "jest --config jest.config.js --maxWorkers=50% --color $@",
    "test:e2e": "playwright test",
    "test:e2e:prod": "cross-env E2E_PLAYWRIGHT_MODE=BUILD_AND_START playwright test",
    "ci-test:unit": "jest --config jest.config.js --runInBand --color $@",
    "typecheck": "tsc --project ./tsconfig.json --noEmit",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "fix:staged-files": "lint-staged --allow-empty",
    "fix:all-files": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
  },
  "dependencies": {
    "@aws-amplify/api": "4.0.28",
    "@aws-amplify/auth": "4.3.18",
    "@aws-amplify/storage": "4.4.11",
    "@babel/core": "7.16.0",
    "@date-io/date-fns": "2.11.0",
    "@dnd-kit/core": "^4.0.3",
    "@dnd-kit/sortable": "^5.1.0",
    "@dnd-kit/utilities": "3.0.1",
    "@fox-dls/banner": "1.0.1",
    "@fox-dls/card": "1.0.1",
    "@fox-dls/carousels": "1.0.1",
    "@fox-dls/checkbox": "1.0.1",
    "@fox-dls/datepicker": "1.0.1",
    "@fox-dls/drawer": "1.0.1",
    "@fox-dls/editor": "1.0.1",
    "@fox-dls/error": "1.0.1",
    "@fox-dls/filepond": "1.0.1",
    "@fox-dls/footer": "1.0.1",
    "@fox-dls/hours": "1.0.1",
    "@fox-dls/layout": "1.0.1",
    "@fox-dls/loading": "1.0.1",
    "@fox-dls/map": "1.0.1",
    "@fox-dls/mobile-navigation": "1.0.1",
    "@fox-dls/modal": "1.0.1",
    "@fox-dls/navigation": "1.0.1",
    "@fox-dls/overlays": "1.0.1",
    "@fox-dls/pulse": "1.0.1",
    "@fox-dls/routes": "1.0.1",
    "@fox-dls/select": "1.0.1",
    "@fox-dls/skeleton": "1.0.1",
    "@fox-dls/textfield": "1.0.1",
    "@fox-dls/theme": "1.0.1",
    "@fox-dls/timepicker": "1.0.1",
    "@fox-dls/utils": "1.0.1",
    "@googlemaps/js-api-loader": "^1.12.11",
    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/icons-material": "5.2.0",
    "@mui/lab": "^5.0.0-alpha.58",
    "@mui/material": "^5.2.2",
    "@reduxjs/toolkit": "^1.6.2",
    "@sentry/nextjs": "^6.15.0",
    "@sentry/node": "6.15.0",
    "@styled-icons/boxicons-logos": "^10.38.0",
    "@styled-icons/boxicons-regular": "^10.38.0",
    "@styled-icons/boxicons-solid": "^10.38.0",
    "@styled-icons/entypo": "^10.34.0",
    "@styled-icons/evaicons-outline": "^10.34.0",
    "@styled-icons/fluentui-system-filled": "^10.35.0",
    "@styled-icons/fluentui-system-regular": "^10.35.0",
    "@styled-icons/foundation": "^10.34.0",
    "@styled-icons/heroicons-outline": "^10.36.0",
    "@styled-icons/ionicons-outline": "^10.34.0",
    "@styled-icons/ionicons-solid": "^10.34.0",
    "@styled-icons/material": "^10.34.0",
    "@styled-icons/octicons": "^10.44.0",
    "@tinymce/tinymce-react": "^3.13.0",
    "@tsed/exceptions": "6.93.0",
    "aws-amplify": "^4.3.10",
    "axios": "^0.24.0",
    "core-js": "^3.19.2",
    "cors": "2.8.5",
    "date-fns": "2.27.0",
    "filepond": "^4.30.3",
    "filepond-plugin-file-poster": "^2.5.0",
    "filepond-plugin-file-validate-size": "^2.2.5",
    "filepond-plugin-file-validate-type": "^1.2.6",
    "filepond-plugin-image-preview": "^4.6.10",
    "formik": "^2.2.9",
    "framer-motion": "^5.3.3",
    "google-map-react": "^2.1.10",
    "graphql": "^16.0.1",
    "graphql-request": "^3.7.0",
    "html-react-parser": "^1.4.1",
    "i18next": "21.5.4",
    "ky": "0.28.7",
    "micro": "9.3.4",
    "next": "^12.0.7",
    "next-compose-plugins": "^2.2.1",
    "next-connect": "0.11.0",
    "next-seo": "^4.28.1",
    "nextjs-cors": "^2.1.0",
    "nx": "^13.2.3",
    "picocolors": "1.0.0",
    "react": "^17.0.2",
    "react-cookie": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-filepond": "^7.1.1",
    "react-i18next": "11.14.3",
    "react-input-mask": "2.0.4",
    "react-is": "17.0.2",
    "react-merge-refs": "^1.1.0",
    "react-query": "^3.34.0",
    "react-redux": "^7.2.6",
    "react-select": "^5.2.1",
    "react-use": "^17.3.1",
    "redux": "4.1.2",
    "regenerator-runtime": "0.13.9",
    "rooks": "5.8.0",
    "sharp": "0.29.3",
    "styled-components": "^5.3.3",
    "superjson": "1.8.0",
    "swiper": "^7.3.1",
    "tslib": "^2.3.1",
    "type-fest": "2.8.0",
    "use-places-autocomplete": "^1.11.0",
    "uuid": "^8.3.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "@changesets/changelog-github": "0.4.2",
    "@changesets/cli": "2.18.1",
    "@next/bundle-analyzer": "12.0.6",
    "@size-limit/file": "7.0.3",
    "@storybook/react": "^6.4.7",
    "@svgr/webpack": "6.1.0",
    "@testing-library/jest-dom": "5.16.0",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@types/cors": "2.8.12",
    "@types/date-fns": "2.6.0",
    "@types/eslint": "8.2.1",
    "@types/jest": "27.0.3",
    "@types/node": "16.11.11",
    "@types/react": "17.0.37",
    "@types/react-dom": "17.0.11",
    "@types/react-is": "17.0.3",
    "@types/react-redux": "^7.1.20",
    "@types/shell-quote": "1.7.1",
    "@types/styled-components": "^5.1.16",
    "@typescript-eslint/eslint-plugin": "5.5.0",
    "@typescript-eslint/parser": "5.5.0",
    "autoprefixer": "10.4.0",
    "babel-jest": "27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-styled-components": "^2.0.2",
    "cross-env": "7.0.3",
    "cypress": "^9.1.1",
    "dotenv": "^10.0.0",
    "dotenv-flow": "3.2.0",
    "dotenv-flow-cli": "1.0.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "eslint": "8.4.0",
    "eslint-config-airbnb": "^19.0.2",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^16.1.0",
    "eslint-config-next": "12.0.6",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-import-resolver-typescript": "2.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jest": "25.3.0",
    "eslint-plugin-jest-formatting": "3.1.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.27.1",
    "eslint-plugin-react-hooks": "4.3.0",
    "eslint-plugin-regexp": "1.5.1",
    "eslint-plugin-sonarjs": "0.11.0",
    "eslint-plugin-testing-library": "5.0.1",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^7.0.4",
    "is-ci": "3.0.1",
    "jest": "27.4.3",
    "lint-staged": "^12.1.2",
    "ngx-deploy-npm": "^3.0.6",
    "nock": "^13.2.1",
    "npm-run-all": "4.1.5",
    "prettier": "2.5.1",
    "react-test-renderer": "17.0.2",
    "rimraf": "3.0.2",
    "sass": "1.44.0",
    "shell-quote": "1.7.3",
    "size-limit": "7.0.3",
    "symlink-dir": "5.0.1",
    "sync-directory": "4.0.7",
    "ts-jest": "27.0.7",
    "ts-node": "10.4.0",
    "typescript": "4.5.2",
    "typescript-plugin-styled-components": "^2.0.0"
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}

Amplify YML

  - appRoot: apps/fox
    env:
    variables:
      #AMPLIFY_DIFF_DEPLOY: true
    backend:
      phases:
        build:
          commands:
            - '# Execute Amplify CLI with the helper script'
            - echo BACKEND BUILD
            - yarn set version 1.22.1
            - amplifyPush --simple
    frontend:
      phases:
        preBuild:
          commands:
            - export YARN_ENABLE_IMMUTABLE_INSTALLS=true
            - cd ../..
            - nvm install 14
            - nvm use 14
            # - yarn set version berry
            - echo "//registry.npmjs.org/:_authToken=TOKEN" > .npmrc
            # - yarn add @endemolshinegroup/cosmiconfig-typescript-loader
            # - yarn plugin import @yarnpkg/plugin-constraints
            # - yarn plugin import @yarnpkg/plugin-workspace-tools
            # - yarn plugin import @yarnpkg/plugin-interactive-tools
            # - yarn plugin import https://yarn.build/latest
            # Replicates NPM CI with RM and Frozen Lock
            # This install isn't really needed.
            - yarn install --frozen-lockfile
            - export NODE_OPTIONS=--max-old-space-size=8192
            - echo POST YARN
            - ls
        build:
          commands:
            - ls
            # - aws s3 cp amplify.yml s3://fox-sandbox/public/
            - cd apps/fox
            - yarn install --frozen-lockfile
            - yarn amplify-build
            - echo CD FOX
            # Copy custom serverless to apps root.
            - cp config/serverless.yml serverless.yml
            # - aws s3 cp serverless.yml s3://fox-sandbox/public/
        postBuild:
          commands:
            - ls
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

App Id

d30o3wao502f5x

Next Config

// @ts-nocheck

// @ts-ignore
const pc = require('picocolors');

const packageJson = require('./package.json');

// @ts-ignore
const NEXTJS_IGNORE_ESLINT = process.env.NEXTJS_IGNORE_ESLINT === '1' || false;
const NEXTJS_IGNORE_TYPECHECK =
  // @ts-ignore
  process.env.NEXTJS_IGNORE_TYPECHECK === '1' || false;

// @ts-ignore
const isProd = process.env.NODE_ENV === 'production';

// Tell webpack to compile those packages
// @link https://www.npmjs.com/package/next-transpile-modules
const tmModules = [
  // for legacy browsers support (only in prod)
  ...(isProd
    ? [
        // ie: '@react-google-maps/api'...
      ]
    : []),
  // ESM only packages are not yet supported by NextJs if you're not
  // using experimental experimental esmExternals
  // @link {https://nextjs.org/blog/next-11-1#es-modules-support|Blog 11.1.0}
  // @link {https://github.com/vercel/next.js/discussions/27876|Discussion}
  // @link https://github.com/vercel/next.js/issues/23725
  // @link https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
  ...[
    // ie: newer versions of https://github.com/sindresorhus packages
  ]
];

/**
 * A way to allow CI optimization when the build done there is not used
 * to deliver an image or deploy the files.
 * @link https://nextjs.org/docs/advanced-features/source-maps
 */
// @ts-ignore
const disableSourceMaps = process.env.NEXT_DISABLE_SOURCEMAPS === 'true';
if (disableSourceMaps) {
  console.info(
    `${pc.green(
      'notice'
    )}- Sourcemaps generation have been disabled through NEXT_DISABLE_SOURCEMAPS`
  );
}

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: false,
  productionBrowserSourceMaps: !disableSourceMaps,

  experimental: {
    // // Prefer loading of ES Modules over CommonJS
    // // @link {https://nextjs.org/blog/next-11-1#es-modules-support|Blog 11.1.0}
    // // @link {https://github.com/vercel/next.js/discussions/27876|Discussion}
    // esmExternals: true,

    // Experimental monorepo support
    // @link {https://github.com/vercel/next.js/pull/22867|Original PR}
    // @link {https://github.com/vercel/next.js/discussions/26420|Discussion}
    externalDir: true
  },

  // @link https://nextjs.org/docs/basic-features/image-optimization
  images: {
    formats: ['image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: [
     DOMAINS
    ]
  },

  typescript: {
    ignoreBuildErrors: NEXTJS_IGNORE_TYPECHECK
  },

  eslint: {
    ignoreDuringBuilds: true
  },

  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Swap sentry/node by sentry/browser
      // config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.(js|ts)x?$/,
      use: [
        {
          loader: '@svgr/webpack',
          // https://react-svgr.com/docs/webpack/#passing-options
          options: {
            svgo: true,
            // @link https://github.com/svg/svgo#configuration
            svgoConfig: {
              multipass: false,
              datauri: 'base64',
              js2svg: {
                indent: 2,
                pretty: false
              }
            }
          }
        }
      ]
    });

    return config;
  },

  env: {
    APP_NAME: packageJson.name,
    APP_VERSION: packageJson.version,
    BUILD_TIME: new Date().toISOString(),
    GMAPS_API: 'KEY',
    GMAPS_DEV_API: 'KEY',
    YARN_ENABLE_IMMUTABLE_INSTALLS: false
  },
  serverRuntimeConfig: {
    // to bypass https://github.com/zeit/next.js/issues/8251
    // @ts-ignore
    // PROJECT_ROOT: __dirname
  }
};

let config;
config = nextConfig;

// @ts-ignore
if (process.env.ANALYZE === 'true') {
  // @ts-ignore
  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: true
  });
  config = withBundleAnalyzer(config);
}

module.exports = config;

Build Settings

No response

Additional information

No response

Rafcin commented 2 years ago

Also I have updated the backend role with the proper permissions

"Action": [
        "acm:DescribeCertificate",
        "acm:ListCertificates",
        "acm:RequestCertificate",
        "cloudfront:CreateCloudFrontOriginAccessIdentity",
        "cloudfront:CreateDistribution",
        "cloudfront:CreateInvalidation",
        "cloudfront:GetDistribution",
        "cloudfront:GetDistributionConfig",
        "cloudfront:ListCloudFrontOriginAccessIdentities",
        "cloudfront:ListDistributions",
        "cloudfront:ListDistributionsByLambdaFunction",
        "cloudfront:ListDistributionsByWebACLId",
        "cloudfront:ListFieldLevelEncryptionConfigs",
        "cloudfront:ListFieldLevelEncryptionProfiles",
        "cloudfront:ListInvalidations",
        "cloudfront:ListPublicKeys",
        "cloudfront:ListStreamingDistributions",
        "cloudfront:UpdateDistribution",
        "cloudfront:TagResource",
        "cloudfront:UntagResource",
        "cloudfront:ListTagsForResource",
        "iam:AttachRolePolicy",
        "iam:CreateRole",
        "iam:CreateServiceLinkedRole",
        "iam:GetRole",
        "iam:PutRolePolicy",
        "iam:PassRole",
        "lambda:CreateFunction",
        "lambda:EnableReplication",
        "lambda:DeleteFunction",
        "lambda:GetFunction",
        "lambda:GetFunctionConfiguration",
        "lambda:PublishVersion",
        "lambda:UpdateFunctionCode",
        "lambda:UpdateFunctionConfiguration",
        "lambda:ListTags",
        "lambda:TagResource",
        "lambda:UntagResource",
        "route53:ChangeResourceRecordSets",
        "route53:ListHostedZonesByName",
        "route53:ListResourceRecordSets",
        "s3:CreateBucket",
        "s3:GetAccelerateConfiguration",
        "s3:GetObject",
        "s3:ListBucket",
        "s3:PutAccelerateConfiguration",
        "s3:PutBucketPolicy",
        "s3:PutObject",
        "s3:PutBucketTagging",
        "s3:GetBucketTagging",
        "lambda:ListEventSourceMappings",
        "lambda:CreateEventSourceMapping",
        "iam:UpdateAssumeRolePolicy",
        "iam:DeleteRolePolicy",
        "sqs:CreateQueue",
        "sqs:DeleteQueue",
        "sqs:GetQueueAttributes",
        "sqs:SetQueueAttributes",
        "amplify:GetApp",
        "amplify:GetBranch",
        "amplify:UpdateApp",
        "amplify:UpdateBranch"
      ],

Rafcin commented 2 years ago

With Next 11 I get this issue on the same page that complained about webpack.

{
    "errorType": "Error",
    "errorMessage": "Cannot find module '../../chunks/3266.js'\nRequire stack:\n- /var/task/pages/restaurant/[id].js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/restaurant/[id].js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module '../../chunks/3266.js'",
        "Require stack:",
        "- /var/task/pages/restaurant/[id].js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:667:27)",
        "    at Module.require (internal/modules/cjs/loader.js:887:19)",
        "    at require (internal/modules/cjs/helpers.js:74:18)",
        "    at Object.__webpack_require__.f.require (/var/task/pages/restaurant/[id].js:2885:28)",
        "    at /var/task/pages/restaurant/[id].js:2805:40",
        "    at Array.reduce (<anonymous>)",
        "    at Function.__webpack_require__.e (/var/task/pages/restaurant/[id].js:2804:67)",
        "    at Function.__webpack_require__.x (/var/task/pages/restaurant/[id].js:2901:33)",
        "    at /var/task/pages/restaurant/[id].js:2925:57"
    ]
}

morishjs commented 2 years ago

When it comes to cannot find module... error, I changed webpack version from 5 to 4 to fix it

Rafcin commented 2 years ago

@morishjs Are you on Next 11? In Next 12 you can't disable webpack5 anymore. In Next 11 you can, and I did try this although that created similar issues. I did that with 11.1.13, maybe it will work with 11.1.12. I'll test it out.

Rafcin commented 2 years ago

I've deployed this before, in my original app I have a deployment that used webpack 5 and Next 12.0.2 and it worked. I don't think it's webpack directly, I'm also missing the ISR and Image services so something during deployment messed up.

Rafcin commented 2 years ago

11.1.13 Also seems to have a bug where it complains that the paths pages/ and pages/restaurant[id] have invalid exports and can't be compiled. 11.1.12 and 12.0.2 seem fine.

dhavall08 commented 2 years ago

Thanks, @morishjs, and @Rafcin.

I also had the 503 issues and solved them in the following ways:

Either downgrade to Webpack 4 from next.config.js (for Next.js < 12) or
Set AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE: true in environments of AWS Amplify App as mentioned here.

Rafcin commented 2 years ago

@dhavall08 I can't downgrade to 4 and I've seen 4 work. I have experimental trace set in my config and I have the env car set through the console.

The issue is also I'm missing resources during deployment like the ISR lambdas and image optimizer

ghost commented 2 years ago

11.1.13 Also seems to have a bug where it complains that the paths pages/ and pages/restaurant[id] have invalid exports and can't be compiled. 11.1.12 and 12.0.2 seem fine.

Hi @Rafcin 👋🏽 for clarification, were you able to successfully deploy your apps with 11.1.12 and 12.0.2?

Rafcin commented 2 years ago

@hloriana Hi! I was able to deploy the apps in both versions. The app renders correctly and the only issues are the Next/image components don't load because the Image Optimizer lambda never deployed, and one of my pages, the restaurant page that displays the restaurant returns a 503 error.

Rafcin commented 2 years ago

@hloriana Depending on the NextJS version I get the following errors in CloudWatch when I visit the 503 page. Also I've opened a ticket with AWS set to Production system impaired. I switched my repo from NX to a standard monorepo now to get this to work.

V12

{
    "errorType": "Error",
    "errorMessage": "Cannot find module '../../webpack-runtime.js'\nRequire stack:\n- /var/task/pages/restaurant/[id].js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/restaurant/[id].js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module '../../webpack-runtime.js'",
        "Require stack:",
        "- /var/task/pages/restaurant/[id].js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:667:27)",
        "    at Module.require (internal/modules/cjs/loader.js:887:19)",
        "    at require (internal/modules/cjs/helpers.js:74:18)",
        "    at /var/task/pages/restaurant/[id].js:1:56130",
        "    at Object.<anonymous> (/var/task/pages/restaurant/[id].js:1:56298)",
        "    at Module._compile (internal/modules/cjs/loader.js:999:30)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)",
        "    at Module.load (internal/modules/cjs/loader.js:863:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:708:14)"
    ]
}

V11

{
    "errorType": "Error",
    "errorMessage": "Cannot find module '../../chunks/3266.js'\nRequire stack:\n- /var/task/pages/restaurant/[id].js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/restaurant/[id].js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module '../../chunks/3266.js'",
        "Require stack:",
        "- /var/task/pages/restaurant/[id].js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:667:27)",
        "    at Module.require (internal/modules/cjs/loader.js:887:19)",
        "    at require (internal/modules/cjs/helpers.js:74:18)",
        "    at Object.__webpack_require__.f.require (/var/task/pages/restaurant/[id].js:2885:28)",
        "    at /var/task/pages/restaurant/[id].js:2805:40",
        "    at Array.reduce (<anonymous>)",
        "    at Function.__webpack_require__.e (/var/task/pages/restaurant/[id].js:2804:67)",
        "    at Function.__webpack_require__.x (/var/task/pages/restaurant/[id].js:2901:33)",
        "    at /var/task/pages/restaurant/[id].js:2925:57"
    ]
}

Rafcin commented 2 years ago

The things I've tried to get it to work:

Deploying a new instance to see if it was an issue with the deployed app. Didn't work
Switched between Next 11 and 12 No real effect. The only change was the missing chunk and missing webpack module between versions
Used the package override and set Next to latest. No effect
Updated IAM role with appropriate perms. At the moment it has access to every resource just for testing. No change

Rafcin commented 2 years ago

I also noticed my second app apps/news just terminates after building, and I'm unsure what that's about.

Deployment ID

dntsgf2k4wg50

Rafcin commented 2 years ago

@hloriana any updates?

evan-resonare commented 2 years ago

My NextJS build is going through and deploying but navigating to the page reads a

503 ERROR

The request could not be satisfied.

The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions.

This has started in the past 24 hours using the same code as was previously working. US-east-2.

Rafcin commented 2 years ago

@evan-resonare Same problem on us-west-2.

evan-resonare commented 2 years ago

@Rafcin my issue seemed to fix itself today. For me, it must have been associated with the recent AWS outages in us-east-2 and us-east-1.

Rafcin commented 2 years ago

This didn't solve it for me

Rafcin commented 2 years ago

Still running into issues

Rafcin commented 2 years ago

Name: fox-apps/fox URL: https://dev.d30o3wao502f5x.amplifyapp.com ID: dev.d30o3wao502f5x Build: 28

Name: fox-apps/news URL: https://dev.dntsgf2k4wg50.amplifyapp.com
ID: dntsgf2k4wg50 Build: 20

Rafcin commented 2 years ago

These are my current app ids that can't deploy.

Rafcin commented 2 years ago

New 503 error

{
    "errorType": "Error",
    "errorMessage": "Cannot find module 'next/dist/shared/lib/utils.js'\nRequire stack:\n- /var/task/pages/restaurant/[id].js\n- /var/task/default-handler-dca9fd08.js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
    "code": "MODULE_NOT_FOUND",
    "requireStack": [
        "/var/task/pages/restaurant/[id].js",
        "/var/task/default-handler-dca9fd08.js",
        "/var/task/index.js",
        "/var/runtime/UserFunction.js",
        "/var/runtime/index.js"
    ],
    "stack": [
        "Error: Cannot find module 'next/dist/shared/lib/utils.js'",
        "Require stack:",
        "- /var/task/pages/restaurant/[id].js",
        "- /var/task/default-handler-dca9fd08.js",
        "- /var/task/index.js",
        "- /var/runtime/UserFunction.js",
        "- /var/runtime/index.js",
        "    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:746:27)",
        "    at Module.require (internal/modules/cjs/loader.js:974:19)",
        "    at require (internal/modules/cjs/helpers.js:93:18)",
        "    at Object.9232 (/var/task/pages/restaurant/[id].js:1:61257)",
        "    at t (/var/task/webpack-runtime.js:1:142)",
        "    at Object.7194 (/var/task/chunks/628.js:1:29572)",
        "    at t (/var/task/webpack-runtime.js:1:142)",
        "    at Object.887 (/var/task/pages/restaurant/[id].js:1:55153)",
        "    at t (/var/task/webpack-runtime.js:1:142)"
    ]
}

ghost commented 2 years ago

Hi @Rafcin, just updating this issue for visibility. To recap, we were able to troubleshoot and get your first app running. I'm still working on root-causing the dynamic routing issue we discovered and I'm investigating the build errors on the second app. I will update with more information once I've made progress with these action items. Thanks!

pogorsky commented 2 years ago

Any updates on this issue?

ssomlk commented 1 year ago

I upgraded from NextJs 11.1.2 to Next 12.3. I cannot see the Image. Gives the 503 error

https://ssomlk-bugfixes3.d31jx5fml0tv9b.amplifyapp.com/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2FIIT-2.717a6c886d0cf6b638cf3c0eb928d65f.svg&w=384&q=75

But the weird thing is I am not using next/image but a normal HTML img tag

Tried downgrading to next@12.0.8 as suggested in https://github.com/aws-amplify/amplify-hosting/issues/2175 but still no luck

aws-amplify / amplify-hosting

NextJS deployment issue. 503 & Missing Image and ISR services. #2430

Before opening, please confirm:

App Id

Region

Amplify Console feature

Describe the bug

Expected behavior

Reproduction steps

PKG JSON

Amplify YML

App Id

Next Config

Build Settings

Additional information

V12

V11

Deployment ID