部署到 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類型）