I am getting errors when deploying to Vercel. Can anyone help me with the my issues below?

Question

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

Cloning completed: 643.936ms

Analyzing source code...

Installing build runtime...

Build runtime installed: 2.278s

Looking up build cache...

Build Cache not found

Installing dependencies...

yarn install v1.22.17

[1/4] Resolving packages...

[2/4] Fetching packages...

[3/4] Linking dependencies...

warning " > @chakra-ui/icons@1.1.1" has unmet peer dependency "@chakra-ui/system@>=1.0.0".

warning "@chakra-ui/icons > @chakra-ui/icon@1.2.1" has unmet peer dependency "@chakra-ui/system@>=1.0.0".

warning "@emotion/styled > @emotion/babel-plugin@11.7.1" has unmet peer dependency "@babel/core@^7.0.0".

warning "@emotion/styled > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.16.5" has unmet peer dependency "@babel/core@^7.0.0-0".

warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".

warning " > eslint-config-next@11.1.0" has unmet peer dependency "eslint@^7.23.0".

warning "eslint-config-next > @typescript-eslint/parser@4.29.0" has unmet peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".

warning "eslint-config-next > eslint-import-resolver-typescript@2.4.0" has unmet peer dependency "eslint@*".

warning "eslint-config-next > eslint-plugin-import@2.23.4" has unmet peer dependency "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0".

warning "eslint-config-next > eslint-plugin-jsx-a11y@6.4.1" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7".

warning "eslint-config-next > eslint-plugin-react@7.24.0" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7".

warning "eslint-config-next > eslint-plugin-react-hooks@4.2.0" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0".

[4/4] Building fresh packages...

success Saved lockfile.

Done in 47.72s.

Detected Next.js version: 11.1.3

Running "yarn run build"

yarn run v1.22.17

$ next build

info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5

Attention: Next.js now collects completely anonymous telemetry regarding usage.

This information is used to shape Next.js' roadmap and prioritize features.

You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:

https://nextjs.org/telemetry

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

Why you should do it regularly:

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

info - Checking validity of types...

warn - No ESLint configuration detected. Run next lint to begin setup

info - Creating an optimized production build...

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

Why you should do it regularly:

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

Failed to compile.

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

Build error occurred

Error: > Build failed because of webpack errors

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) at async Object.build [as default]

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

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Error: Command "yarn run build" exited with 1

info - Loaded env from /Users/gregmcnally/Downloads/CS55.13-todo-app-week-8-main/.env.local

info - Using webpack 5. Reason: Enabled by default

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

Failed to compile.

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

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

Type 'IncomingMessage & { cookies: NextApiRequestCookies; }' is not assignable to type 'null'.

VS CODE 60 | // withAuthUserTokenSSR . 61 | const token = await AuthUser.getIdToken()

62 | const endpoint = 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 above.

npm ERR: A complete log of this run can be found in. 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

Firstly I'd recommend that you try run:

yarn build or npm run build locally, as you'll be able to catch a lot of these errors before attempting to deploy on Vercel.

There are a few errors:

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

Tells us that your project is unable to resolve an import for the "Header" component in your todos page. Have a look at that page in your project and ensure you're using the right import path.

Secondly, there is a type error in ssr-no-token.tsx: and so type validation is causing the build to fail.

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

If we look at the error message we can see that you need to add checks to ensure that cookies is not null or undefined (and is the type NextApiRequestCookies )