Next.js app deploys successfully on Vercel, but fails on Amplify

Question

I am currently trying to host my next.js app on AWS Amplify, but it fails every single time. I am using Git CI/CD pipeline. When the same app is deployed on Vercel, it got deployed in just 60 sec, and it works. Here's the error I am getting:

Starting SSR Build...
2021-07-15T17:21:36.050Z [ERROR]: Error: 'Command failed with exit code 1: node_modules/.bin/next build',
                                  command: 'node_modules/.bin/next build',
                                  exitCode: 1,
                                  signal: undefined,
                                  signalDescription: undefined,
                                  stdout: 'info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5\n' +
                                  'info  - Checking validity of types...\n' +
                                  'info  - Creating an optimized production build...',
                                  stderr: 'Failed to compile.\n' +
                                  '\n' +
                                  "ModuleNotFoundError: Module not found: Error: Can't resolve 'mock-aws-s3' in '/<project_location>/node_modules/@mapbox/node-pre-gyp/lib/util'\n" +
                                  '\n' +
                                  '\n' +
                                  '> Build error occurred\n' +
                                  'Error: > Build failed because of webpack errors\n' +
                                  '    at /<project_location>/node_modules/next/dist/build/index.js:15:924\n' +
                                  '    at async Span.traceAsyncFn (/<project_location>/node_modules/next/dist/telemetry/trace/trace.js:6:584)',
                                  failed: true,
                                  timedOut: false,
                                  isCanceled: false,
Terminating logging...

Edit: Here's the package.json file

{
  "name": "laturnaorders",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "bcrypt": "^5.0.1",
    "bootstrap": "5.0.2",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.13.2",
    "next": "11.0.1",
    "next-connect": "^0.10.1",
    "react": "17.0.2",
    "react-bootstrap": "^2.0.0-beta.2",
    "react-dom": "17.0.2",
    "react-select": "^4.3.1",
    "sass": "^1.35.2"
  },
  "devDependencies": {
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1"
  }
}

Edit 2: I looked it up and it seems that mock-aws-s3 is a devDependency of@mapbox/node-pre-gyp package, which itself is a dependency of bcrypt.js. Does this have something to do with node version? I am currently using node v16.4.0

Can you provide your `package.json` file? – Daniel Jul 15 '21 at 20:05 — Daniel, Jul 15 '21 at 20:05

siegerts · Answer 1 · 2021-10-07T13:58:11.247

1

Amplify Hosting currently supports all Next.js features in version 9.x.x including SSR API routes, dynamic pages, and automatic pre-rendering.

Please check your version if you're experiencing build errors or 503s on SSR pages. In some situations downgrading to v10.2 will help solve these errors.

https://aws.amazon.com/about-aws/whats-new/2021/05/aws-amplify-hosting-announces-server-side-rendering-support-for-next-js-web-apps/

EDIT:

The current version support is outlined here - https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#ssr-Amplify-support

edited Oct 07 '21 at 13:58

answered Jul 16 '21 at 16:05

siegerts

461
4
11

I tried rolling back to v10.2, but the issue still persists. I was happy with Vercel before, but needed some Amplify features. So, I tried to switch back, but it didn't work. – Atharv Kurdukar Jul 22 '21 at 19:37
Any luck solving this problem? – Abdullah Mujahid Sep 29 '21 at 08:47

score 0 · Answer 2 · answered Sep 12 '22 at 22:01

0

As of September 2022 I have experimented weird build fails on Amplify because of middleware. This doesn’t happen in Vercel.

Delete your middleware code and try do redeploy, this should fix the error.

Of course you have to find a workaround for your middleware functionality, but these are the limitations of Amplify at the moment.

answered Sep 12 '22 at 22:01

Juan Carlos Elorriaga

21
3

After a lot of futile efforts, I decided to stick with Vercel instead of struggling to fix many of the issues Amplify has with Next.js. – Atharv Kurdukar Sep 14 '22 at 14:21

Next.js app deploys successfully on Vercel, but fails on Amplify

2 Answers2