node.js - 在 NextJS monorepo 中构建失败 — HookWebpackError : processor is not a function

Question

当我尝试在我的 monorepo 中构建 NextJS 应用程序之一时，出现错误:

$ rm -r packages/library/node_modules/; rm -r packages/daily/node_modules/; rm -r node_modules/; rm -r packages/shared/node_modules; rm package-lock.json; sudo rm -r packages/daily/.next/; npm i; npm --prefix packages/daily/ run build

> next build

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  

Failed to compile.

HookWebpackError: processor is not a function

> Build error occurred
Error: > Build failed because of webpack errors
    at /home/ubuntu/cal-frontend/packages/daily/node_modules/next/dist/build/index.js:397:19
    at async Span.traceAsyncFn (/home/ubuntu/cal-frontend/packages/daily/node_modules/next/dist/telemetry/trace/trace.js:60:20)
    at async Object.build [as default] (/home/ubuntu/cal-frontend/packages/daily/node_modules/next/dist/build/index.js:77:25)

奇怪的是node/npm的版本和代码与前几天我上次运行这个命令成功时一模一样。我以前从未遇到过这个错误。我什至尝试克隆到一个全新的 Linux EC2 实例，看看是否有一些缓存文件搞砸了，但我得到了完全相同的错误。我仍然能够重新部署几天前在 Heroku 上的最新提交。

next dev 命令仍然可以正常工作。

当我尝试在 packages/下创建一个新网站时，问题开始出现。但即使在我恢复到编写该代码之前的提交之后，错误仍然存​​在。

monorepo 包含两个网站，它们在 repo 中共享一个名为 shared 的共享代码包。这是 package/daily 应用程序的 webpack next.config.js 文件。同样，自错误开始以来没有任何代码更改。

const withFonts = require('next-fonts');
const withTM = require('next-transpile-modules')(['@my-repo-name/shared']);
require('dotenv').config({ path: '../../.env' });

module.exports = withTM(withFonts({
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  webpack(config, options) {
    return config;
  },
}));

Node 版本:v16.10.0npm 版本:7.24.0

(我也试过使用16.14和8.3构建，也有同样的错误)

还有根级别的 package.json(删除了个人详细信息):

{
  "name": "my-repo-name",
  "version": "1.0.0",
  "workspaces": {
    "packages": [
      "packages/*"
    ]
  },
  "keywords": [],
  "author": "redacted-for-stack-overflow@stackoverflow.org",
  "license": "UNLICENSED",
  "description": "REDACTED FOR STACK OVERFLOW",
  "engines": {
    "node": "16.10.0"
  },
  "cacheDirectories": [
    "node_modules",
    "packages/library/.next/cache"
  ],
  "scripts": {
    "lint": "eslint . --ext js,jsx",
    "build": "npm run build --prefix packages/$APP_NAME"
  },
  "dependencies": {},
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.2",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

Answer 1

在 package.json 中添加分辨率键为我解决了这个问题。希望这应该是 vercel 的一个临时问题。

"resolutions": {
    "cssnano-preset-simple": "3.0.0"
 }