Unable to Build Next.js pages dir app on amplify with builder.io package

2024-09-10T07:20:15.747Z [INFO]: Git SSH Key acquired

1

2024-09-10T07:20:15.825Z [INFO]: # Cloning repository: git@github.com:WeCheck/frontend.git

2

2024-09-10T07:20:18.094Z [INFO]: Agent pid 441

3

2024-09-10T07:20:18.095Z [INFO]: Identity added: /root/.ssh/git_rsa (/root/.ssh/git_rsa)

4

Cloning into 'frontend'...

5

2024-09-10T07:20:18.095Z [INFO]: # Checking for Git submodules at: /codebuild/output/src1908784220/src/frontend/.gitmodules

6

2024-09-10T07:20:18.105Z [INFO]: # Retrieving environment cache...

7

2024-09-10T07:20:18.150Z [INFO]: # Retrieved environment cache

8

2024-09-10T07:20:18.150Z [INFO]: ---- Setting Up SSM Secrets ----

9

2024-09-10T07:20:18.150Z [INFO]: SSM params {"Path":"/amplify/d1enur9k41bji2/backend/","WithDecryption":true}

10

2024-09-10T07:20:19.013Z [INFO]: No live updates for this build run

11

2024-09-10T07:20:19.079Z [INFO]: # Retrieving cache...

12

2024-09-10T07:20:38.605Z [INFO]: # Extracting cache...

13

2024-09-10T07:21:09.197Z [INFO]: # Extraction completed

14

2024-09-10T07:21:09.443Z [INFO]: # Retrieved cache

15

2024-09-10T07:21:26.362Z [INFO]: ## Starting Backend Build

16

# Starting phase: build

17

2024-09-10T07:21:28.700Z [INFO]: e[0mAmplify AppID found: d1enur9k41bji2. Amplify App name is: dev-eu-west-1-frontend-homee[0m

18

2024-09-10T07:21:28.744Z [INFO]: e[0mBackend environment backend found in Amplify Console app: dev-eu-west-1-frontend-homee[0m

19

2024-09-10T07:21:29.494Z [WARNING]: - Fetching updates to backend environment: backend from the cloud.

20

2024-09-10T07:21:29.806Z [WARNING]: ✔ Successfully pulled backend environment backend from the cloud.

21

2024-09-10T07:21:29.833Z [INFO]: ✅

22

2024-09-10T07:21:31.887Z [INFO]: e[33mNote: It is recommended to run this command from the root of your app directorye[39m

23

2024-09-10T07:21:32.055Z [WARNING]: - Initializing your environment: backend

24

2024-09-10T07:21:32.392Z [WARNING]: ✔ Initialized provider successfully.

25

2024-09-10T07:21:33.788Z [WARNING]: - Uploading files.

26

2024-09-10T07:21:34.095Z [WARNING]: - Uploading files.

27

2024-09-10T07:21:34.150Z [WARNING]: - Uploading files.

28

2024-09-10T07:21:34.199Z [INFO]:

29

2024-09-10T07:21:34.199Z [INFO]:

30

2024-09-10T07:21:34.276Z [INFO]: ✅ Initialized your environment successfully.

31

2024-09-10T07:21:34.276Z [INFO]: ✅ Your project has been successfully initialized and connected to the cloud!

32

Some next steps:

33

"amplify status" will show you what you've added already and if it's locally configured or deployed

34

"amplify add <category>" will allow you to add features like user login or a backend API

35

"amplify push" will build all your local backend resources and provision it in the cloud

36

"amplify console" to open the Amplify Console and view your project status

37

"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

38

Pro tip:

39

Try "amplify add api" to create a backend API and then "amplify push" to deploy everything

40

2024-09-10T07:21:35.877Z [INFO]: # Completed phase: build

41

## Completed Backend Build

42

2024-09-10T07:21:35.882Z [INFO]: ## Starting Frontend Build

43

# Starting phase: preBuild

44

# Executing command: yarn install

45

2024-09-10T07:21:36.428Z [INFO]: yarn install v1.22.19

46

2024-09-10T07:21:36.553Z [INFO]: [1/4] Resolving packages...

47

2024-09-10T07:21:37.199Z [INFO]: [2/4] Fetching packages...

48

2024-09-10T07:22:18.650Z [INFO]: [3/4] Linking dependencies...

49

2024-09-10T07:22:18.667Z [WARNING]: warning "@nx/next > copy-webpack-plugin@10.2.4" has unmet peer dependency "webpack@^5.1.0".

50

2024-09-10T07:22:18.667Z [WARNING]: warning "@nx/next > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

51

warning "@nx/next > @nx/react > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

52

2024-09-10T07:22:18.670Z [WARNING]: warning " > @rollup/plugin-url@7.0.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".

53

2024-09-10T07:22:18.677Z [WARNING]: warning "@storybook/nextjs > css-loader@6.8.1" has unmet peer dependency "webpack@^5.0.0".

54

2024-09-10T07:22:18.677Z [WARNING]: warning "@storybook/nextjs > node-polyfill-webpack-plugin@2.0.1" has unmet peer dependency "webpack@>=5".

55

warning "@storybook/nextjs > postcss-loader@7.3.3" has unmet peer dependency "webpack@^5.0.0".

56

2024-09-10T07:22:18.678Z [WARNING]: warning "@storybook/nextjs > sass-loader@12.6.0" has unmet peer dependency "webpack@^5.0.0".

57

warning "@storybook/nextjs > style-loader@3.3.3" has unmet peer dependency "webpack@^5.0.0".

58

2024-09-10T07:22:18.684Z [WARNING]: warning " > swc-loader@0.1.15" has unmet peer dependency "webpack@>=2".

59

2024-09-10T07:23:10.230Z [INFO]: [4/4] Building fresh packages...

60

2024-09-10T07:23:12.583Z [WARNING]: error /codebuild/output/src1908784220/src/frontend/node_modules/isolated-vm: Command failed.

61

Exit code: 127

62

Command: prebuild-install || (node-gyp rebuild --release -j max && node-gyp clean)

63

Arguments:

64

Directory: /codebuild/output/src1908784220/src/frontend/node_modules/isolated-vm

65

Output:

66

prebuild-install warn install /lib64/libstdc++.so.6: version `GLIBCXX_3.4.30' not found (required by /codebuild/output/src1908784220/src/frontend/node_modules/isolated-vm/out/isolated_vm.node)

67

/bin/sh: line 1: node-gyp: command not found

68

2024-09-10T07:23:12.583Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

69

2024-09-10T07:23:23.320Z [ERROR]: !!! Build failed

70

2024-09-10T07:23:23.384Z [INFO]: Please read more about Amplify Hosting's support for SSR frameworks to find if your build failure is related to an unsupported feature: https://docs.aws.amazon.com/amplify/latest/userguide/amplify-ssr-framework-support.html. You may also find this troubleshooting guide useful: https://docs.aws.amazon.com/amplify/latest/userguide/troubleshooting-ssr-deployment.html

71

2024-09-10T07:23:23.384Z [ERROR]: !!! Error: Command failed with exit code 127

72

2024-09-10T07:23:23.384Z [INFO]: # Starting environment caching...

73

2024-09-10T07:23:23.385Z [INFO]: # Uploading environment cache artifact...

74

2024-09-10T07:23:23.444Z [INFO]: # Uploaded environment cache artifact

75

2024-09-10T07:23:23.445Z [INFO]: # Environment caching completed

Provided above my build stacktrace, using amazon linux 2023 machine with the below amplify.yml

version: 1
applications:

  • appRoot: apps/home
    backend:
    phases:
    build:
    commands:
    - ‘# Execute Amplify CLI with the helper script’
    - amplifyPush --simple
    frontend:
    phases:
    preBuild:
    commands:
    - yarn install
    build:
    commands:
    - npx nx build home
    artifacts:
    baseDirectory: dist/apps/home/.next
    files:
    - '/*’
    cache:
    paths:
    - node_modules/
    /*
    buildPath: /

using next.js 13 and this is the below […pages].tsx

import ‘@app/lambada/styles/index.css’;
import React from ‘react’;
import { BuilderComponent, builder, useIsPreviewing } from ‘@builder.io/react’;
import { BuilderContent } from ‘@builder.io/sdk’;
import DefaultErrorPage from ‘next/error’;
import Head from ‘next/head’;
import { GetStaticProps } from ‘next’;

export const BUILDER_API_KEY = ‘MY ACTUAL API KEY’;
builder.init(BUILDER_API_KEY);

// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
// Fetch the builder content for the given page
const page = await builder
.get(‘page’, {
userAttributes: {
urlPath: ‘/’ + ((params?.page as string)?.join(‘/’) || ‘’),
},
})
.toPromise();
// Return the page content as props
return {
props: {
page: page || null,
},
// Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
// Get a list of all pages in Builder
const pages = await builder.getAll(‘page’, {
// We only need the URL field
fields: ‘data.url’,
options: { noTargeting: true },
});
// Generate the static paths for all pages in Builder
return {
paths: pages.map((page) => page.data?.url).filter((url) => url !== ‘/’),
fallback: ‘blocking’,
};
}
// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
const isPreviewing = useIsPreviewing();
// If the page content is not available
// and not in preview mode, show a 404 error page
if (!page && !isPreviewing) {
return ;
}
// If the page content is available, render
// the BuilderComponent with the page content
return (
<>

{page?.data?.title}

{/* Render the Builder page */}
<BuilderComponent model=“page” content={page || undefined} />
</>
);
}

Hello, would you be able to create a sandbox deployment of your integration? I may be able to provide better guidance, if provided with your application code.