Help Needed: TypeScript Build Error with Next.js 14 on Vercel

Unanswered

American black bear posted this in #help-forum

Open in Discord

American black bearOP

2024-05-24T17:56:28.950Z

6 Replies

American black bearOP

2024-05-24T17:57:01.813Z

Hi everyone,

I've been encountering a persistent TypeScript build error with my Next.js 14 project on Vercel. The same configuration works perfectly fine locally, but I'm running into issues on Vercel's build process. Below are the details:

### Local Build Success

Locally, everything builds perfectly without any issues:

$ pnpm build

> admin@0.1.0 build D:\WORK\PEACOCK\EDUKARMA\edukarma-cms\apps\admin
> next build

   ▲ Next.js 14.0.4
   - Environments: .env

   Creating an optimized production build  .<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (101kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
 ✓ Creating an optimized production build
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (17/17)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                                            Size     First Load JS
┌ λ /                                                  1.62 kB         281 kB
├ λ /_not-found                                        0 B                0 B
├ λ /api/[[...route]]                                  0 B                0 B
├ λ /api/aws/image                                     0 B                0 B
├ λ /sign-in/[[...sign-in]]                            1.02 kB         101 kB
├ λ /sign-up/[[...sign-up]]                            2.29 kB         103 kB
└ λ /sso-callback                                      2.29 kB         103 kB
+ First Load JS shared by all                          82.6 kB
  ├ chunks/665-24466df5e47f9eac.js                     26.8 kB
  ├ chunks/e6f01a54-39b5cba10bd3383d.js                53.3 kB
  ├ chunks/main-app-31ac6212c441fbde.js                226 B
  └ chunks/webpack-3207bdcb25d7f675.js                 2.32 kB

ƒ Middleware                                           224 kB

○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js

### Vercel Build Error

However, when deploying to Vercel, I get the following error:

[23:17:52.851] admin:build: > Build error occurred
[23:17:52.852] admin:build: FatalError: error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'.
[23:17:52.852] admin:build: 
[23:17:52.852] admin:build:     at getTypeScriptConfiguration (/vercel/path0/node_modules/.pnpm/next@14.0.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/lib/typescript/getTypeScriptConfiguration.js:49:19)
[23:17:52.853] admin:build:     at loadJsConfig (/vercel/path0/node_modules/.pnpm/next@14.0.4_@babel+core@7.24.4_react-...
[23:17:52.960] admin:build: ERROR: command finished with error: command (/vercel/path0/apps/admin) /pnpm8/node_modules/.bin/pnpm run build exited (1)

### tsconfig.json

Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "Bundler", // Use nodenext for compatibility
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "src/env.ts"
  ],
  "exclude": ["node_modules"]
}

### package.json

Here's my package.json:

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "clean": "rimraf -g \"{node_modules,.next,.cache}\"",
    "dev": "next dev",
    "build": "next build",
    "start":

 "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
  
    "cashfree-pg": "^4.1.2",
    "clsx": "^2.1.0",
    "date-fns": "^3.6.0",
    "dayjs": "^1.11.10",
    "framer-motion": "^11.1.2",
    "hono": "^4.2.5",
    "html2canvas": "^1.4.1",
    "jotai": "^2.8.0",
    "jspdf": "^2.5.1",
    "lodash": "^4.17.21",
    "next": "14.0.4",
    "next-themes": "^0.2.1",
    "nextjs-toploader": "^1.6.11",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "razorpay": "^2.9.3",
    "rc-pagination": "^4.0.4",
    "rc-rate": "^2.12.0",
    "rc-slider": "^10.5.0",
    "rc-table": "^7.45.4",
    "react": "^18.2.0",
    "react-big-calendar": "^1.11.6",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.3",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.1.0",
    "react-to-pdf": "^1.0.1",
    "react-toggle-dark-mode": "^1.1.1",
    "react-use": "^17.5.0",
    "recharts": "^2.12.5",
    "rimraf": "^5.0.5",
    "rizzui": "^0.8.4",
    "simplebar-react": "^3.2.4",
    "stripe": "^14.25.0",
    "superjson": "^2.2.1",
    "svix": "^1.21.0",
    "tailwind-merge": "^2.2.2",
    "tailwindcss": "^3.4.3",
    "uuid": "^9.0.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.202",
    "@types/node": "^20.11.17",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@types/uuid": "^9.0.8",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.0.4",
    "typescript": "^5.3.3"
  }
}

### Issue

The main issue seems to be related to the TypeScript configuration on Vercel. The error mentions the --moduleResolution option must be one of: 'node', 'classic', 'node16', 'nodenext', but I haven't changed my tsconfig.json recently.

Does anyone have any insights or suggestions on how to resolve this issue? Any help would be greatly appreciated!

Thank you!