部署到 Vercel 时出现错误。 谁能帮我解决下面的问题？

Question

克隆 github.com/gmcnally78/-Final-Data-Driven-FullStack-App2 (Branch: main, Commit: e1d0133)

克隆完成：643.936ms

分析源代码...

正在安装构建运行时...

安装的构建运行时：2.278s

正在查找构建缓存...

未找到构建缓存

安装依赖...

纱线安装 v1.22.17

[1/4] 解决包...

[2/4] 正在取包...

[3/4] 链接依赖...

警告“ > @chakra-ui/icons@1.1.1”具有未满足的对等依赖性“@chakra-ui/system@>=1.0.0”。

警告“@chakra-ui/icons > @chakra-ui/icon@1.2.1”具有未满足的对等依赖性“@chakra-ui/system@>=1.0.0”。

警告“@emotion/styled > @emotion/babel-plugin@11.7.1”具有未满足的对等依赖关系“@babel/core@^7.0.0”。

警告“@emotion/styled > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.16.5”具有未满足的对等依赖关系“@babel/core@^7.0.0-0”。

警告 "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" 具有未满足的对等依赖关系 "@babel/core@^7.0.0-0"。

警告“ > eslint-config-next@11.1.0”具有未满足的对等依赖性“eslint@^7.23.0”。

警告“eslint-config-next > @typescript-eslint/parser@4.29.0”具有未满足的对等依赖性“eslint@^5.0.0 || ^6.0.0 || ^7.0.0”。

警告“eslint-config-next > eslint-import-resolver-typescript@2.4.0”具有未满足的对等依赖项“eslint@*”。

警告“eslint-config-next > eslint-plugin-import@2.23.4”具有未满足的对等依赖关系“eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0” .

警告“eslint-config-next > eslint-plugin-jsx-a11y@6.4.1”具有未满足的对等依赖关系“eslint@^3 || ^4 || ^5 || ^6 || ^7”。

警告“eslint-config-next > eslint-plugin-react@7.24.0”具有未满足的对等依赖性“eslint@^3 || ^4 || ^5 || ^6 || ^7”。

警告“eslint-config-next > eslint-plugin-react-hooks@4.2.0”具有未满足的对等依赖关系“eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 | | ^7.0.0”。

[4/4] 构建新包...

成功保存的锁文件。

在 47.72 秒内完成。

检测到 Next.js 版本：11.1.3

运行“纱线运行构建”

纱线运行 v1.22.17

$ 下一个构建

信息 - 使用 webpack 5. 原因：默认启用https://nextjs.org/docs/messages/webpack5

注意：Next.js 现在收集有关使用情况的完全匿名遥测数据。

此信息用于塑造 Next.js 的路线图并确定功能的优先级。

您可以通过访问以下 URL 了解更多信息，包括如果您不想参与此匿名计划如何选择退出：

https://nextjs.org/telemetry

Browserslist：caniuse-lite 已过时。 请运行：

npx browserslist@latest --update-db

为什么你应该经常这样做：

https://github.com/browserslist/browserslist#browsers-data-updating

info - 检查类型的有效性...

警告 - 未检测到 ESLint 配置。 运行下一个 lint 开始设置

info - 创建优化的生产版本...

Browserslist：caniuse-lite 已过时。 请运行：

npx browserslist@latest --update-db

为什么你应该经常这样做：

https://github.com/browserslist/browserslist#browsers-data-updating

编译失败。

ModuleNotFoundError：找不到模块：错误：无法解析“/vercel/path0/pages/todos”中的“../components/Header”

发生构建错误

错误：> 由于 webpack 错误，构建失败

at /vercel/path0/node_modules/next/dist/build/index.js:397:19

at async Span.traceAsyncFn

(/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20) 在异步 Object.build [默认]

(/vercel/path0/node_modules/next/dist/build/index.js:77:25)

错误命令失败，退出代码为 1。

info 访问https://yarnpkg.com/en/docs/cli/run以获取有关此命令的文档。

错误：命令“yarn run build”以 1 退出

info - 从 /Users/gregmcnally/Downloads/CS55.13-todo-app-week-8-main/.env.local 加载的环境

信息 - 使用 webpack 5. 原因：默认启用

https://nextjs.org/docs/messages/webpack5

编译失败。

./pages/ssr-no-token.tsx:62:51

类型错误：'IncomingMessage & { cookies: NextApiRequestCookies; 类型的参数 }' 不能分配给类型为“null |”的参数不明确的'。

输入'IncomingMessage & { cookies: NextApiRequestCookies; }' 不可分配给类型 'null'。

VS 代码 60 | // withAuthUserTokenSSR . 61 | 常量令牌 = 等待 AuthUser.getIdToken()

62 | 常量端点 = getAbsoluteURL('/api/example', req) | ^ 63 | const response = await fetch(endpoint, { 64 | method: 'GET', 65 | headers: { info - Checking validity of types.npm ERR. code ELIFECYCLE npm ERR. errno 1 npm ERR: todo-app-week08@0.1. 0 build: next build npm ERR. Exit status 1 npm ERR. npm ERR. Failed at the todo-app-week08@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output以上。

npm ERR：此运行的完整日志可在 npm ERR 中找到。 /Users/gregmcnally/.npm/_logs/2021-12-16T06_44_01_675Z-debug.log gregmcnally@Gregs-MBP CS55.13-todo-app-week-8-main %

Answer 1

首先，我建议您尝试运行：

yarn build或npm run build ，因为在尝试在 Vercel 上部署之前，您将能够发现很多这些错误。

有几个错误：

ModuleNotFoundError: Module not found: Error: Can't resolve '../components/Header' in '/vercel/path0/pages/todos'

告诉我们您的项目无法解析待办事项页面中“标题”组件的导入。 查看项目中的该页面并确保使用正确的导入路径。

其次， ssr-no-token.tsx:中存在类型错误，因此类型验证导致构建失败。

 Type error: Argument of type 'IncomingMessage & { cookies: NextApiRequestCookies; }' is 
not assignable to parameter of type 'null | undefined'.

如果我们查看错误消息，我们可以看到您需要添加检查以确保 cookies 不是null或undefined （并且是NextApiRequestCookies类型）