Why next build stuck on "Checking validity of types..."? (TypeScript)

[tszhong0411]

I try to migrate my project from JavaScript to TypeScript. When I deploy on Vercel or build on local. And stuck on "Checking validity of types...".

➜ npm run build

> tailwind-nextjs-starter-blog@1.5.1 build
> next build && node ./scripts/generate-sitemap

info  - Checking validity of types ..

And I try to clone the branch "typescript" of this repository. And also fail to build.

I deploy on vercel for one hour. Then get build failed.
How can I resolve it?
I tried to google it. Maybe it is webpack problem?

Vercel log:

22;02:18.587 | Cloning github.com/TszHong0411/honghong.me (Branch: main, Commit: 897217e)
22:02:19.335 | Cloning completed: 747.432ms
22:02:19.406 | Analyzing source code...
22:02:19.939 | Installing build runtime...
22:02:22.970 | Build runtime installed: 3.031s
22:02:23.798 | Looking up build cache...
22:02:34.391 | Build cache downloaded [291.67 MB]: 10268.691ms
22:02:34.675 | Installing dependencies...
22:02:34.995 | yarn install v1.22.17
22:02:35.107 | [1/4] Resolving packages...
22:02:35.993 | [2/4] Fetching packages...
22:03:19.955 | [3/4] Linking dependencies...
22:03:19.961 | warning "next-pwa > babel-loader@8.2.3" has unmet peer dependency "@babel/core@^7.0.0".
22:03:19.962 | warning "next-pwa > babel-loader@8.2.3" has unmet peer dependency "webpack@>=2".
22:03:19.962 | warning "next-pwa > clean-webpack-plugin@4.0.0" has unmet peer dependency "webpack@>=4.0.0 <6.0.0".
22:03:19.962 | warning "next-pwa > terser-webpack-plugin@5.3.1" has unmet peer dependency "webpack@^5.1.0".
22:03:19.962 | warning "next-pwa > workbox-webpack-plugin@6.4.2" has unmet peer dependency "webpack@^4.4.0 \|\| ^5.9.0".
22:03:19.971 | warning " > react-textfit@1.1.1" has incorrect peer dependency "react@^15.0.0 \|\| ^16.0.0".
22:03:19.971 | warning " > react-textfit@1.1.1" has incorrect peer dependency "react-dom@^15.0.0 \|\| ^16.0.0".
22:03:19.974 | warning " > compression-webpack-plugin@9.2.0" has unmet peer dependency "webpack@^5.1.0".
22:03:19.976 | warning " > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 \|\| ^5.0.0".
22:03:41.280 | [4/4] Building fresh packages...
22:03:54.794 | success Saved lockfile.
22:03:54.799 | $ prisma generate \|\| true
22:03:55.477 | Prisma schema loaded from prisma/schema.prisma
22:03:56.399 |  
22:03:56.400 | ✔ Generated Prisma Client (3.9.2 \| library) to ./node_modules/@prisma/client in 130ms
22:03:56.400 | You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
22:03:56.400 | ```
22:03:56.401 | import { PrismaClient } from '@prisma/client'
22:03:56.401 | const prisma = new PrismaClient()
22:03:56.401 | ```
22:03:56.484 | $ husky install
22:03:56.589 | husky - Git hooks installed
22:03:56.595 | Done in 81.61s.
22:03:56.636 | Detected Next.js version: 12.1.0
22:03:56.638 | Running "yarn run build"
22:03:56.985 | yarn run v1.22.17
22:03:57.024 | $ next build && node ./scripts/generate-sitemap
22:03:58.780 | info  - Checking validity of types...
23:02:34.424 | killing sandbox due to timeout1 3600000ms

[timlrx]

I just tried out a fresh clone of the typescript branch without issues. It's probably some typing issue if you are stuck on a info - Checking validity of types... message. You are also using prisma and have other code so it is hard to debug the cause.

Try upgrading typescript to ^4.6.1-rc if you are not on it. Otherwise, you would probably have to slowly remove parts of the code until you can find which parts cause the program to be stuck.

[tszhong0411]

OK. I tried to clone again, it works. Not typescript version problem. I try to debug now😭😂

[tszhong0411]

I think the problem is here. Is it? I know about npm is not too much. I keep ignoring this error before.

➜ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: eslint-config-next@12.1.0
npm ERR! Found: typescript@4.6.1-rc
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"4.6.1-rc" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@">=3.3.1" from eslint-config-next@12.1.0
npm ERR! node_modules/eslint-config-next
npm ERR!   dev eslint-config-next@"12.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@4.5.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@">=3.3.1" from eslint-config-next@12.1.0
npm ERR!   node_modules/eslint-config-next
npm ERR!     dev eslint-config-next@"12.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\TszHong\AppData\Local\npm-cache\eresolve-report.txt for a full report.     

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\TszHong\AppData\Local\npm-cache\_logs\2022-02-23T13_19_03_666Z-debug-0.log 

[tszhong0411]

I changed every file to ts/tsx. I found the files at the following paths causing the error. Looks like is mdx problem.

BUG: /lib/remark-code-title.ts
BUG: /lib/mdx.ts
BUG: /lib/tags.ts
BUG: /pages/blog/page/[page].tsx
BUG: /pages/blog/[...slug].tsx
BUG: /pages/tags/[tag].tsx
BUG: /pages/about.tsx
BUG: /pages/cookie-policy.tsx
BUG: /pages/index.tsx
BUG: /pages/pc-specs.tsx
BUG: /pages/privacy-policy.tsx
BUG: /pages/tags.tsx

[tszhong0411]

Before those files convert to typescript, they can build normally.

[tszhong0411]

Okay. I think I can solve it. I can clone the repository and remodify it.
thanks for your helping