Vercel NestJS deployment failing with type issues

Question

Background:

I am working on a leisure project that connects with different Google services to ease my daily personal routine. The NodeJS code, available on main branch, works fine i.e Vercel deployment is success but now I am migrating it to NestJS so I can scale the app.

Repo: Github repo

Issue

NestJS deployment on Vercel is throwing type issues that can be seen in Vercel logs & deployment status -> building. It works fine locally but not on Vercel deployment.

My assumption is the issue to be in tsconfig file. Here is the code in it:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
    "target": "ES6",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
  }
}

For more details, please check this github issue link

Update:

I was able to fix the type issues to a good extent. Strangely, the type issues were only visible in Vercel deployment logs. I believe there is only one issue now i.e. the Vercel is unable to pickup the *.njk files in deployment.

Here is the work in progress Github PR

Update2:

Raised a issue on Vercel for nunjucks template not found

issue

Answer 1

There were type issues and strangely only visible on Vercel deployment logs. I was unable to reproduce them locally. Anyway, I will list out the main fixes here. All fixes are available in this PR.

tsconfig fix

• "esModuleInterop": true in CompilerOptions.

Strangely, all solutions on SO were suggesting to keep this as `false`.

Allowing *.njk nunjucks templates in server & Vercel deployment

Vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    },
    {
      "src": "**/*.njk",
      "use": "@vercel/static"
    }
  ],
  ...
  ...
}

nest-cli.json

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "deleteOutDir": true,
    "assets": ["**/*.njk"]
  }
}

Fetching Request and Response types from express-serve-static-core instead of express 🤷‍♂️

import type { Request, Response } from 'express-serve-static-core';

instead of

import type { Request, Response } from 'express';