I'm trying to host my NextJS app on Amplify, but when Amplify is attempting to build the app I get an error saying that either the 'bufferutil' or 'utf-8-validate' module cannot be found. Here's an output from when it failed because it couldn't find the bufferutil module:
# Starting phase: preBuild
# Executing command: npm ci
2021-09-21T19:44:34.448Z [INFO]: > aws-sdk@2.983.0 postinstall /codebuild/output/src886343224/[my_app_path]/node_modules/aws-sdk
> node scripts/check-node-version.js
2021-09-21T19:44:34.599Z [INFO]: > @apollo/protobufjs@1.2.2 postinstall /codebuild/output/src886343224/[my_app_path]/node_modules/@apollo/protobufjs
> node scripts/postinstall
2021-09-21T19:44:34.653Z [INFO]: > core-js-pure@3.15.2 postinstall /codebuild/output/src886343224/[my_app_path]/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
2021-09-21T19:44:34.693Z [INFO]: [96mThank you for using core-js ([94m https://github.com/zloirock/core-js [96m) for polyfilling JavaScript standard library![0m
[96mThe project needs your help! Please consider supporting of core-js on Open Collective or Patreon: [0m
[96m>[94m https://opencollective.com/core-js [0m
[96m>[94m https://www.patreon.com/zloirock [0m
[96mAlso, the author of core-js ([94m https://github.com/zloirock [96m) is looking for a good job -)[0m
2021-09-21T19:44:34.876Z [INFO]: added 1308 packages in 12.354s
2021-09-21T19:44:34.887Z [INFO]: # Executing command: mkdir out
2021-09-21T19:44:34.888Z [INFO]: # Completed phase: preBuild
2021-09-21T19:44:34.889Z [INFO]: # Starting phase: build
# Executing command: npm run build
2021-09-21T19:44:35.060Z [INFO]: > slack-app@0.1.0 build /codebuild/output/src886343224/[my_app_path]
> next build
2021-09-21T19:44:35.694Z [INFO]: info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
2021-09-21T19:44:35.806Z [INFO]: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
2021-09-21T19:44:35.830Z [INFO]: Attention: Next.js now collects completely anonymous telemetry regarding usage.
2021-09-21T19:44:35.830Z [INFO]: This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
2021-09-21T19:44:35.864Z [INFO]: info - Checking validity of types...
2021-09-21T19:44:37.467Z [INFO]: info - Creating an optimized production build...
2021-09-21T19:45:14.794Z [INFO]: info - Compiled successfully
2021-09-21T19:45:14.795Z [INFO]: info - Collecting page data...
2021-09-21T19:45:16.189Z [INFO]: info - Generating static pages (0/7)
2021-09-21T19:45:17.372Z [INFO]: info - Generating static pages (1/7)
2021-09-21T19:45:17.502Z [INFO]: info - Generating static pages (3/7)
2021-09-21T19:45:17.511Z [INFO]: info - Generating static pages (5/7)
2021-09-21T19:45:17.588Z [INFO]: info - Generating static pages (7/7)
2021-09-21T19:45:17.589Z [INFO]: info - Finalizing page optimization...
2021-09-21T19:45:17.593Z [INFO]:
2021-09-21T19:45:17.603Z [INFO]: Page Size First Load JS
┌ ● / 1.46 kB 234 kB
├ /_app 0 B 230 kB
├ ○ /404 1.36 kB 231 kB
├ λ /api/graphql 0 B 230 kB
├ λ /api/slack/redirect 0 B 230 kB
├ λ /api/test 0 B 230 kB
├ λ /api/user/workspaces 0 B 230 kB
├ λ /api/workspace 0 B 230 kB
├ λ /dashboard 2.73 kB 240 kB
├ ● /dashboard/search 47.3 kB 285 kB
├ ● /dashboard/share_of_voice 12.2 kB 250 kB
├ └ css/6b915c1b3977da366ff4.css 1.53 kB
├ ● /dashboard/word_cloud 48.1 kB 286 kB
└ ● /sign_out 1.49 kB 234 kB
+ First Load JS shared by all 230 kB
├ chunks/framework.2191d1.js 42.4 kB
├ chunks/main.588261.js 20.3 kB
├ chunks/pages/_app.ba1cc2.js 166 kB
├ chunks/webpack.307141.js 898 B
└ css/11662bea7c6682700e19.css 4.1 kB
2021-09-21T19:45:17.604Z [INFO]: λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
2021-09-21T19:45:17.760Z [INFO]: Starting SSR Build...
2021-09-21T19:46:57.093Z [ERROR]: Error: Command failed with exit code 1: node_modules/.bin/next build
Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve 'bufferutil' in '/codebuild/output/src886343224/[my_app_path]/node_modules/ws/lib'
> Build error occurred
Error: > Build failed because of webpack errors
at /codebuild/output/src886343224/[my_app_path]/node_modules/next/dist/build/index.js:15:924
at async Span.traceAsyncFn (/codebuild/output/src886343224/[my_app_path]/node_modules/next/dist/telemetry/trace/trace.js:6:584)
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types...
info - Creating an optimized production build...
at makeError (/root/.//node_modules/execa/lib/error.js:60:11)
at handlePromise (/root/.//node_modules/execa/index.js:118:26)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Builder.build (/root/.//node_modules/@sls-next/lambda-at-edge/dist/build.js:348:13) {
shortMessage: 'Command failed with exit code 1: node_modules/.bin/next build',
command: 'node_modules/.bin/next build',
escapedCommand: '"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 'bufferutil' in '/codebuild/output/src886343224/[my_app_path]/node_modules/ws/lib'\n" +
'\n' +
'\n' +
'> Build error occurred\n' +
'Error: > Build failed because of webpack errors\n' +
' at /codebuild/output/src886343224/[my_app_path]/node_modules/next/dist/build/index.js:15:924\n' +
' at async Span.traceAsyncFn (/codebuild/output/src886343224/[my_app_path]/node_modules/next/dist/telemetry/trace/trace.js:6:584)',
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}
2021-09-21T19:46:57.095Z [ERROR]: [G[?25h[G[J
77s › dep5aop5dy2y4 › Error: Command failed with exit code 1: node_modules/.bin/next build
Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve 'bufferutil' in '/codebuild/output/src886343224/[my_app_path]/node_modules/ws/lib'
> Build error occurred
Error: > Build failed because of webpack errors
at /codebuild/output/src886343224/[my_app_path]/node_modules/next/dist/build/index.js:15:924
at async Span.traceAsyncFn (/codebuild/output/src886343224/[my_app_path]/node_modules/next/dist/telemetry/trace/trace.js:6:584)
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types...
info - Creating an optimized production build...
[G[?25h
Terminating logging...
I've read some people saying that I need to add some externals to the webpack config and I did but still get the same errors:
module.exports = {
webpack: (config) => {
Object.assign(config.externals, {
bufferutil: 'bufferutil',
'utf-8-validate': 'utf-8-validate',
});
return config;
},
};
Here is my package.json file:
{
"name": "",
"author": "",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev:local": "node server.js",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@apollo/client": "^3.4.7",
"@aws-amplify/ui-react": "^1.2.11",
"@aws-sdk/client-dynamodb": "^3.29.0",
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/runtime": "^7.14.6",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.0",
"apollo-boost": "^0.4.9",
"apollo-server-micro": "^2.25.2",
"autoprefixer": "^10.3.1",
"aws-amplify": "^4.2.5",
"aws-sdk": "^2.983.0",
"axios": "^0.21.1",
"dynamoose": "^2.8.1",
"graphql": "^15.5.1",
"micro": "^9.3.4",
"next": "^11.0.1",
"next-connect": "^0.10.1",
"postcss": "^8.3.6",
"react": "^17.0.2",
"react-content-loader": "^6.0.3",
"react-dom": "17.0.2",
"react-minimal-pie-chart": "^8.2.0",
"react-multi-carousel": "^2.6.5",
"react-wordcloud": "^1.2.7",
"sentiment": "^5.0.2",
"stopword": "^1.0.11",
"tailwindcss": "^2.2.7",
"eslint": "7.30.0",
"eslint-config-next": "11.0.1"
}
}
Here is my Amplify.yaml file:
version: 1
applications:
- backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm ci
- mkdir out
build:
commands:
- npm run build
artifacts:
baseDirectory: out
files:
- '**/*'
cache:
paths:
- node_modules/**/*
appRoot: slack-app
Any help is appreciated, thank you!
EDIT I just wanted to clarify that I am able to run the build command just fine locally