AWS Amplify - Module not found: Error: Can't resolve 'bufferutil'

Question

I have a problem with deployin Next.js application on AWS Amplify. While building at the "Starting SRR Build..." moment it throws this:

2022-03-18T21:40:34.115Z [INFO]: Starting SSR Build...
2022-03-18T21:43:42.138Z [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/src274598471/src/proj/node_modules/ws/lib'
> Build error occurred
Error: > Build failed because of webpack errors
at /codebuild/output/src274598471/src/proj/node_modules/next/dist/build/index.js:15:924
at async Span.traceAsyncFn (/codebuild/output/src274598471/src/proj/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 processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Builder.build (/root/.//node_modules/@sls-next/lambda-at-edge/dist/build.js:377:13)
at async NextjsComponent.build (/root/.//node_modules/@sls-next/-component/dist/component.js:165:13)
at async NextjsComponent.default (/root/.//node_modules/@sls-next/-component/dist/component.js:22:13)
at async fn (/root/.npm/_npx/1924/lib/node_modules//node_modules/@/template/utils.js:280:41)
at async Promise.all (index 0)
at async executeGraph (/root/.npm/_npx/1924/lib/node_modules//node_modules/@/template/utils.js:294:3)
at async Template.default (/root/.npm/_npx/1924/lib/node_modules//node_modules/@/template/.js:67:38)
at async Object.runComponents (/root/.npm/_npx/1924/lib/node_modules//node_modules/@/cli/src/index.js:222:17) {
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/src274598471/src/proj/node_modules/ws/lib'\n" +
'\n' +
'\n' +
'> Build error occurred\n' +
'Error: > Build failed because of webpack errors\n' +
'    at /codebuild/output/src274598471/src/proj/node_modules/next/dist/build/index.js:15:924\n' +
'    at async Span.traceAsyncFn (/codebuild/output/src274598471/src/proj/node_modules/next/dist/telemetry/trace/trace.js:6:584)',
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}

Somewhere in the Inte.net I've found that for some people worked adding externals to next.config.js but for me it didn't.

my next.config.js:

const { i18n } = require('./next-i18next.config');
const path = require('path')

module.exports = {
  reactStrictMode: true,
  i18n,
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  externals: [/node-modules/, 'bufferutil', 'utf-8-validate']
}

I would be grateful for any kind of help.

Answer 1

尝试在 Amplify 控制台应用程序的环境变量部分将以下环境变量设置为 true：

AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE true

Answer 2

// add below property in webpack.config.js

externals: {
      bufferutil: "bufferutil",
      "utf-8-validate": "utf-8-validate",
    }