在 AWS Amplify 中构建 Nextjs 应用程序时出现 Webpack 错误

Question

我的 SSR Next 11 应用无法在 Amplify 中构建并出现此错误：

HookWebpackError: processor is not a function
> Build error occurred
Error: > Build failed because of webpack errors
  at /codebuild/output/src527327235/src/myApp/node_modules/next/dist/build/index.js:397:19
  at async Span.traceAsyncFn (/codebuild/output/src527327235/src/myApp/node_modules/next/dist/telemetry/trace/trace.js:60:20)
  at async Object.build [as default] (/codebuild/output/src527327235/src/myApp/node_modules/next/dist/build/index.js:77:25)

它确实在本地构建并且运行很好，所以我不确定这个 Webpack 错误是从哪里来的。是什么原因造成的？

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

我正在使用 yarn，但也尝试使用 npm 并得到同样的错误。

package.json

...
{
  "name": "myApp",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next build && next export"
  },
  "dependencies": {
    "@apollo/client": "3.5.9",
    "@bugsnag/js": "7.16.1",
    "@bugsnag/plugin-react": "7.16.1",
    "apollo-link-retry": "2.2.16",
    "autoprefixer": "10.4.2",
    "aws-amplify": "4.3.14",
    "aws-appsync-auth-link": "3.0.7",
    "aws-appsync-subscription-link": "3.0.9",
    "boring-avatars": "^1.6.3",
    "graphql": "16.3.0",
    "lodash.debounce": "4.0.8",
    "moment": "2.29.1",
    "next": "11.1.2",
    "postcss": "8.4.6",
    "react": "17.0.2",
    "react-cookie-consent": "7.3.1",
    "react-div-100vh": "^0.7.0",
    "react-dom": "17.0.2",
    "react-icons": "4.3.1",
    "react-player": "2.9.0",
    "react-slick": "^0.28.1",
    "slick-carousel": "^1.8.1",
    "tailwindcss": "3.0.23"
  },
  "devDependencies": {
    "babel-eslint": "10.1.0",
    "eslint": "7.32.0",
    "eslint-config-airbnb": "19.0.2",
    "eslint-config-next": "12.0.10",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-hooks": "4.3.0"
  },
  "description": "",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT"
}

Answer 1

更新到 "next": "12.1.5" 解决了这个问题。

在 AWS Amplify 中构建 Nextjs 应用程序时出现 Webpack 错误

Webpack error when building Nextjs app in AWS Amplify

next.js

aws-amplify