Next.js Discord

Discord Forum

Learn Next.js Tutorial: Deployment Fail!

Unanswered
Red-billed Tropicbird posted this in #help-forum
Open in Discord
Red-billed TropicbirdOP
I got to this part in the tutorial: https://nextjs.org/learn/dashboard-app/setting-up-your-database#connect-and-deploy-your-project

I was following everything EXACTLY as they wrote, and even made sure to copy paste their code over mine (after doing the exercise myself) to make sure all of it was working good. When I run npm run dev on my local machine and look at the website on localhost, everything seems to be fine.

But when I deployed the project to vercel (in order to get their postgresql server, but I didn't get that far even) I got the following deployment error:
...
   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...
Failed to compile.
./app/lib/data.ts:73:37
Type error: Object is possibly 'undefined'.
  71 |     ]);
  72 |
> 73 |     const numberOfInvoices = Number(data[0].rows[0].count ?? '0');
     |                                     ^
  74 |     const numberOfCustomers = Number(data[1].rows[0].count ?? '0');
  75 |     const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0');
  76 |     const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0');
Error: Command "npm run build" exited with 1


How can I fix this and deploy properly? It seems that it should just have worked out of the box, but it doesn't? :(
Build Failed

Command "npm run build" exited with 1

3 Replies

Red-billed TropicbirdOP
Possible error source, my tsconfig.json is too strict in certain ways (or perhaps I shouldn't use ESNext)?
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleDetection": "force",
    "isolatedModules": true,
    "noUncheckedIndexedAccess": true,
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "app/lib/placeholder-data.js",
    "scripts/seed.js"
  ],
  "exclude": ["node_modules"]
}
Other possible source of error, my package.json is using too new versions of something?
{
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev --turbo",
    "start": "next start"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@tailwindcss/forms": "^0.5.7",
    "@types/node": "20.9.0",
    "@vercel/postgres": "^0.5.1",
    "autoprefixer": "10.4.16",
    "bcrypt": "^5.1.1",
    "clsx": "^2.0.0",
    "next": "^14.0.2",
    "postcss": "8.4.31",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "3.3.5",
    "typescript": "^5.2.2",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@total-typescript/ts-reset": "^0.5.1",
    "@types/bcrypt": "^5.0.2",
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "dotenv": "^16.3.1",
    "eslint": "^8.53.0",
    "eslint-config-next": "^14.0.2",
    "prettier": "^3.0.3"
  },
  "engines": {
    "node": ">=18"
  }
}
Red-billed TropicbirdOP
I found the source of the 'error', its the tsconfig.json where I enabled "noUncheckedIndexedAccess": true,

It seems that the data.ts file fails that expectation and so it cannot build.